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與上面是一樣的。可見，預編譯器可以優化很多冗余的代碼。

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

雖然改樣式痛苦十分，但是css博大精深，所以還是好好學習吧！