遇到问题

团队开发中css的命名冲突

为css的命名而绞尽脑汁

css的命名五花八门

解决方案

使用规范：BEM

BEM是一种CSS命名规范。

BEM代表 “块（block），元素（element），修饰符（modifier）”]

eg:

.list__item_active{}

__ 双下划线：双下划线用来连接块和块的子元素

_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

实例对比

//通常我写法

<ul class="box">

     <li class="item active">光明之子</li>

     <li class="item">冥王之子</li>

</ul>

.box{}

.box .item{}

.box .item.active{}

================================

================================

//BEM写法

<ul class="box">  

       <li class="box__item_active">光明之子</li>

       <li class="box__item">冥王之子</li>

</ul>

.box{}

.box__item{}

.box__item_active{}

总结

1.命名冲突

因为子元素不是单独的一个命名，而是包含了他的父级元素，这样命名冲突就降低了很多

【就像我们读书的时候：一个学校加"李伟"的人有多个，但是如果没有前缀修饰，就不知道是哪个"李伟"，但是如果加上班级，一班的李伟和二班的李伟，这样就很好的解决了冲突】

2.命名有了规范，开发人员命名起来就简单一些

【就像我们要写年终总结，给你模板和不给你模板，两个一对比就很明显了】

3.结构逻辑，易于阅读

【有了规范，我们直接看类名是不是就能知道元素的】

4.css查找层级明显减少

【之前可能需要四五级的查找，现在直接一个类名就可以，是不是提升了css解析的效率】