发表于： 2018-05-18 22:48:41
1 656
今天完成的事情：学习了如何组件化开发及BEM命名方案；
明天的计划：开始任务14；
今天的收获：
组件只是页面的一部分，页面像是一个容器，组件是页面中的小区域，功能模块可以是一个独立的组件，也可以是存在组件中的一个功能，功能模块具有弹性，可以视情况而定，假如在header中有个btn按钮，这个按钮就是一个模块组件，存在header这个组件当中；
模块化其实可以说绝大情况下等同与组件化！
介绍：如果css代码量比较庞大的，会出现这么几个问题：
1、无法快速确切的知道一个类的作用；
2、无法快速确定一个类在哪里被使用；
3、新增一个类是否会造成冲突；
为了解决以上问题，可以将页面的每一个功能模块（）作为一个独立的组件，然后对组件的内容进行合理的命名（比如button），从而有助于确定一个css代码和相关页面结构的功能，
命名方式
在css组件中的命名方式最好是驼峰命名，因为写组件的时候不是写全局的样式，仅仅只是完成需要渲染的组件样式。假如需要些一个btn样式，先创建一个btn-style.css文件，在这个文件中书写样式；
组件中的元素命名用一个单词表示；
组件块和子组件块使用空行分割；子组件块中三空行分割；
使用@mixin混合器
如果每个组件里的style都写出来的，重复的工作就太多了，所以这时候需要一个混合器用来装能够复用的样式，如果在别的组件中有能够使用这个样式的地方，就直接使用@include调用就好了！
——————————————————
BEM css命名方案
块
块名称 .block
Element
元素是块的一部分，块名称加两个下划线加上元素名称.block__elem
Modifier
块或是元素上的标志，这些标志可以形容元素或块的外观、行为或状态。
每个block可以单独一个css，要用的时候就@import;
返回列表
评论