开发工具和优化流程 模块化内容 全面测试 流式处理 详细的文档
分享知识才变得更加强大
HTML OOCSS：分离结构和外观，分离容器和内容 SMACSS：模块化架构的可扩展CSS，五个具体类别：基础，布局，模块，状态，主题 基础: 如果不添加CSS类名, 标记会以什么外观呈现 布局: 把页面分成一些区域 模块: 设计中的模块化, 可复用的单元 状态: 描述在特定的状态或情况下, 模块或布局的的显示方法 主题: 一个可选的视觉外观层, 可以让你更换不同主题
BEM：块元素修饰符（css命名规则：块名__元素--修饰符） 块名: 所属组件的名称 元素: 元素在块里面的名称 修饰符: 任何与块或元素相关联的的修饰符
块名
这里的块名很多初学者会以为是inline-block中的块, 其实这里的块名指的是一个独立的模块或组件. 例如一个<header>可以用做一个模块, <header>中的<nav>可以用作一个模块. 模块之间是可以相互嵌套的. 上面的示例代码中 ,toggle就是一个独立的模块
元素
元素是指无法用在其他块名中的部分, 在BEM方法中, 元素跟在块名后面使用__连接, 之所以约定使用双下划线是因为方便在块名中使用单下划线命名. 上面示例代码中的toggle__control, toggle__title就是块名+元素的命名方式.
修饰符
修饰符与SMACSS中的状态类似, 在BEM方法中, 修饰符需要跟在元素后面使用--连接. 有的人会觉得这种写法会使得代码冗余, SMACSS使用is-active同样可以表示同样的作用, 为什么上面的代码要使用toggle__details--active呢? 其实, 如果单独看open和is-active这两个名字, 我们并不知道它们的含义是什么, 但是当看到一个toggle__details--active的类名, 我们就知道它是表示: 这个元素的名称是details, 位置在toggle组件里, 状态为active.
CSS 分离容器和内容 区分布局与组件的角色和职责 在标记上使用单一，扁平的选择器 单一职责原则，单一样式来源，内容修饰符
JS 过多的依赖 设计分解 组件分类
单元测试：调用要测试的函数，传递一些预先设置好的参数，并描述结果应该是什么。
前端架构的四个核心 (一) 代码 归根到底, 所有的网站都是由一堆文本文件和资源文件组成的. 当我们面对制作网站所产生的大量代码时, 就会发现为代码和资源设定一个期望是多么重要. 在代码部分, 我们会专注于如果实现系统架构中的HTML, CSS, JavaScript.
(二) 流程 现在早已过了FTP上传文件的时代, 那么现在重要的是思考怎么用工具和流程构建一个高效且避免出错的工作流. 工作流变得越来越复杂, 那些用于它们的工具也同样如此. 这些工具在提高生产力, 加快效率和保持代码一致性上带来了惊人的效果, 但也伴随着过度工程化和抽象化的风险. 所以, 现有的工作流是需要改变的.
(三) 测试 要构建一个可扩展和可持续优化的系统, 必须保证新代码和老代码能够很好的兼容. 我们的代码不会独立存在, 它们都是大型系统中的一部分. 创建覆盖面广泛的测试方案, 能确保老代码还能正常运作.
(四) 文档 一般而言, 如果不是团队中的重要成员要离开, 我们几乎都不会意识到文档的重要性. 等到那个时候, 大家将不得不停下手头的工作, 优先编写所有的文档. 作为前端机构师, 你要善于在项目开发的同时编写良好的文档.