在项目的开发过程中，我们常常会因为越来越复杂的css代码而感到力不从心。如何合理的组织css代码，成为了我们在前端开发过程中必须考虑的一个环节。在阅读element源码的时候，了解到了BEM的命名风格。使用BEM命名约定，理论上来说，每一行css代码只有一个选择器。BEM代表“块（block）、元素（element）、修饰符（modifier）”，我们经常使用这三个实体来开发组件。在选择器中，扩展关系由以下三个符号表示：-破折号：仅用作连字符，表示块或子元素的多个单词之间的连接标记。--双虚线：用于描述块或块的子元素的状态__双下划线：双下划线用于连接块和块的子元素type-block__element--modifierblock(block)块具有特定和独特含义的设计或布局的一部分，无论是语义还是视觉。在大多数情况下，任何单独的页面元素（无论是复杂的还是简单的）都可以被视为一个块。它的HTML容器将有一个唯一的CSS类名，即块的名称。块的CSS类名称将带有一些前缀（ui-），这些前缀的作用类似于CSS中的名称空间。块的正式（实际上是半正式）定义有以下三个基本原则：CSS中只能使用类名（不能使用ID）。每个块名称都应该有一个命名空间（前缀），每个CSS规则都必须属于一个块。元素块中的子元素是块的子元素，子元素的子元素在bem中也被认为是块的直接子元素。块中元素的类名必须以父块的名称为前缀。修饰符（modifier）“修饰符”可以理解为一个方块的特定状态，表明它持有特定的属性。最好用一个例子来解释。代表按钮的块默认为三种尺寸：小、中和大。为了避免创建三个不同的块，最好在块上放置修饰符。这个修饰符应该有一个名称（例如：size）和一个值（small、normal或big）。这种命名方式在element的源码中是完全实现的，在使用scss的情况下/*BEM----------------------*/@mixinb($block){$B:$namespace+'-'+$block!global;.#{$B}{@content;}}@mixine($element){$E:$element!global;$选择器：&;$当前选择器：“”；@each$unitin$element{$currentSelector:#{$currentSelector+"."+$B+$元素分隔符+$unit+","};}@ifhitAllSpecialNestRule($selector){@at-root{#{$selector}{#{$currentSelector}{@content;}}}}@else{@at-root{#{$currentSelector}{@content;}}}}@mixinm($modifier){$selector:&;$当前选择器：“”；@each$unitin$modifier{$currentSelector:#{$currentSelector+&+$modifier-separator+$unit+","};}@at-root{#{$currentSelector}{@content;}}}
