BEM规范学习

最近导师推荐的css命名规范，大概看了一下，感觉还不错，以后可以试试，方便自己管理代码
然后还做了一些笔记，帮助自己记忆。

1. Block：
   块名可以由字母，数字，波折号组成，形成一个css类，为命名空间添加一个短前缀
   如果它接受一个类名，那么任何DOM节点都可以被当做一个块
   仅使用类名选择器
   没有标签名和ID
   不依赖页面上其他块和元素

2. Element
   块的一部分没有独立意义，任何元素语义上和他的块 绑定在一起
   元素名称可以由字母，数字，下划线，波折号组成
   css类由块名加上连个下划线加上元素名组成，例如：.block__elem
   块内任何DOM节点都可以是元素。在给定的块上，所有元素在语义上都是相等的
   仅使用类名选择器，
   没有标签名和ID
   不依赖页面上其他块和元素
   例如：
   .block__elem { color: #042; }

   .block .block__elem { color: #042; }
   div.block__elem { color: #042; }

3. Modifier 修饰符
   块或元素上的标志。使用它们来改变外观、行为或状态。
   修饰名可以由字母，数字，下划线，破折号组成，CSS类形成块或元素的名称加上两个破折号
   复杂修饰符中的空格被破折号替代
   例如：.block--mod
   .block__elem--mod
   .block--color-black
   .block--color-red
   添加在块/元素DOM节点上的修饰符是一个额外的类名，将修饰符类添加到他们修改的块和元素中，并保留原类
   例如：
   <div class="block block--mod">...</div>
   <div class="block block--size-big
   block--shadow-yes">...</div>
   <div class="block--mod">...</div>
   使用修饰符类名作为选择器，例如：.block--hidden { }
   根据块级修饰符修改元素，例如：.block--mod .block__elem { }
   |
   元素修饰符，例如：.block__elem--mod { } <-----------|