css样式污染

框架虽好，但需求千奇百怪，有时候框架的样式远远不满足需求，我们就需要大量的通过css来完成。

但是，css一个写不好，污染全局，可就出大事了。

定义css的样式时，尽量少用不用标签选择器

 css类命名要语义化，个性化。

比如一个add按钮，通过个性化的定义，可以更好的区分元素，也方便修改查看时定位

//不推荐
 <button class="add-btn"></button>
//推荐
<button class="mymoney-add-btn"></button>

有时候会同意规定前缀来区分样式库，比如‘ui-’，‘js-’

 推荐一种css命名方法：BEM命名规范

BEM - Block Element Modfier

• Block 块：可以根据元素内容划分
• 例如： header，menu，checkbox，input
• Element 元素：块的一部分
• 例如：header title ，menu item，checkbox caption，input icon
• Modfier 修饰：修饰样式的描述

• 例如：disabled，highlighted，checked，fixed，active

<button class="footer-btn-disabled">
<input type="radio" class='form-radio-checked'>

但是，就算再怎么花样的命名，当项目好几个人做的时候或者样式过多的时候，还是没法保证每个元素的class名都不一样。

那么可以通过父元素或者祖先元素进行限定

html

<div id="content" class="home-content-inner">
  <div class="home-modal-header" >
    <h4 class="home-modal-title">hello world</h4>
  </div>
  <div class="modal-body" >
    <div class="modal-container" id='modalContent'></div>
  </div>
    <div class="modal-footer">
        <div class="modal-button-group">
           <button type="button" class="btn btn-block btn-active">Submit</button
        </div>
    </div>
</div>

css

.home-content-inner{
 width:100%；
} 
.home-content-inner .home-modal-header{
  padding:0 10px;
}
.home-content-inner .home-modal-header.home-modal-title {
font-size：14px;
}

前面的限制越多，样式也就越精确的渲染，也就避免了css污染。

但是也有缺点，太冗余了。每个样式前面都加限定，代码看着又长又笨，如下面的这一条。

.order-sim-content-inner .pp-number .input-group .form-clear-input {
    opacity: 0;
}

这时候，就不得不说css预处理器——Sass和Less。

Sass和Less都是在css的基础上进行扩展，不同之处在于Less是基于JavaScript，是在客户端处理的；Sass是基于Ruby的，是在服务器端处理的。

两者都可以实现嵌套规则，实现上面的样式，在less里就可以写成如下的形式，编译后的css与上面是一样的。可见，预编译器可以优化很多冗余的代码。

?

1 2 3 4 5 6 7 8 9

.home-content-inner{    width:100%；   .modal-header{     padding:0 10px;    .modal-title{      font-size：14px;     }   } }

虽然改样式痛苦十分，但是css博大精深，所以还是好好学习吧！