CSS 书写规范——BEM思想 --一个风中凌乱的前端

在开发中前端开发人员经常会遇到css 命名的烦恼，尤其是代码一多，你的css 就百花齐放，啥样的都有！但是终究要有一个规范！
1.所有的变量名要有意义 看到名字就知道变量所存储的数据，当然 也可以使用驼峰命名法！
但是这里不是将驼峰，而是另一种命名法！这种命名法 很多的UI框架库、组件已经在使用了（例如：vant），个人极力推荐！
下面步入正题~
使用BEM命名规范来组织CSS代码

如何使用BEM

*一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block）*
*属于块的某部分，可作为一个元素（Element）
用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器（Modifier）*

在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔，以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

type-block__element_modifier

保证各个部分只有一级 B__E_M ，修饰器需要和对应的块或元素一起使用，避免单独使用

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,
是由Yandex团队提出的一种前端命名方法论。
这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

命名约定

.block{}
.block__element{}
.block--modifier{}

BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。我们用一个类比/模型来思考一下下面的这些元素是怎么关联的：

块（block）
一个块是设计或布局的一部分，它有具体且唯一地意义 ，要么是语义上的要么是视觉上的。

在大多数情况下，任何独立的页面元素（或复杂或简单）都可以被视作一个块。它的HTML容器会有一个唯一的CSS类名，也就是这个块的名字。

针对块的CSS类名会加一些前缀（ ui-），这些前缀在CSS中有类似 命名空间 的作用。

一个块的正式（实际上是半正式的）定义有下面三个基本原则：

CSS中只能使用类名（不能是ID）。
每一个块名应该有一个命名空间（前缀）
每一条CSS规则必须属于一个块。
例如：一个自定义列表 .list 是一个块，通常自定义列表是算在 mod 类别的，在这种情况下，一个 list 列表的block写法应该为:
.list   

元素（element）
块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。

如上面的例子，li.item 是列表的一个子元素，
.list{}
.list .item{}


.list{}
.list__item{}

修饰符（modifier）
一个“修饰符”可以理解为一个块的特定状态，标识着它持有一个特定的属性。

用一个例子来解释最好不过了。一个表示按钮的块默认有三个大小：小，中，大。为了避免创建三个不同的块，最好是在块上加修饰符。这个修饰符应该有个名字（比如：size ）和值（ small，normal 或者 big ）。

如上面的例子中，表示一个选中的列表，和一个激活的列表项

.list{}
.list.select{}
.list .item{}
.list .item.active{}


.list{}
.list_select{}
.list__item{}
.list__item_active{}

.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}	

顶级块是‘person’，它拥有一些元素，如‘hand’。一个人也会有其他形态，比如女性，这种形态进而也会拥有它自己的元素。下面我们把他们写成‘常规’CSS:

.person{}
.hand{}
.female{}
.female-hand{}
.left-hand{}	

使用

*1、嵌套关系

• 元素之间可以彼此嵌套
• 你可以拥有任意层次的嵌套级别
• 一个元素总是一个模块的一部分，而不是另一个元素的一部分，这意味着元素的名称不能被定义为 block__elem1__elem2 这样的层次结构*

<!--
     正确的。完整的元素名的结构符合如下模式：
     'block-name__element-name'
 -->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input"/>
        <button class="search-form__button"></button>
    </div>
</form>

 <!--
     不正确的。完整的元素名的结构不符合如下模式：
     'block-name__element-name'
 -->
<form class="search-form">
    <div class="search-form__content">
        <!-- 推荐：'search-form__input' 或者 'search-form__content-input' -->
        <input class="search-form__content__input"/>
        <!-- 推荐：'search-form__button' 或者 'search-form__content-button' -->
        <button class="search-form__content__button"></button>
    </div>
</form>

如果在模块名称上定义了命名空间，也要保证元素名称是依赖于模块的（block_elem）。
在 DOM 树中，一个模块可以有元素嵌套结构：

<div class="block">
    <div class="block_elem1">
        <div class="block_elem2">
            <div class="block_elem3"></div>
        </div>
    </div>
</div>

大概就这些吧，详细请看 ----》W3C文档 BEM规范

结束语：
前端的群大家不要再加了！我的那个QQ号已经被永久封停！过些日子给大家推荐新的群，大家有什么问题可以在新群里面提出来，大家一起交流！谢谢大家！

创作不易，各位道友可否留下二两银子？