CSS命名规范——BEM思想
FLowUs邀请链接：https://flowus.cn/login?code=AXNU63
FlowUs邀请码：AXNU63
https://www.cnblogs.com/coder-zyz/p/6749295.html
https://www.w3cplus.com/css/bem-definitions.html
https://segmentfault.com/a/1190000000391762
其他资源：
http://blog.lxjwlt.com/front-end/2015/10/08/why-bem.html
https://www.ibm.com/developerworks/cn/web/1512_chengfu_bem/
https://en.bem.info/methodology/quick-start/
http://getbem.com/
什么是 BEM ?
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。
这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。
Nicolas Gallagher修改过的BEM http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
命名方法
.block代表了更高级别的抽象或组件。.block__element代表.block的后代，用于形成一个完整的.block的整体。.block--modifier代表.block的不同状态或不同版本。
之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定
BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。
通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。
以往开发组件，我们都用“重名概率小”或者干脆起个“当时认为是独一无二的名字”来保证样式不冲突，这是不可靠的。
理想的状态下，我们开发一套组件的过程中，我们应该可以随意的为其中元素进行命名，而不必担心它是否与组件以外的样式发生冲突。
BEM解决这一问题的思路在于，由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。
这是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。
这也可以看作是一种“硬性约束”，因为一般来说，我们的组件会放置在同一目录下，那么操作系统中，同一目录下文件名必须唯一，这一点也就确保了组件之间不会冲突。
未完待续
