CSS書寫規範與理論

       前端體系的變化可謂是突飛猛進，短短一年時間，從理論、框架、構建工具、甚至開發語言都發生很是大的變化。 隨着新項目就即將啓動，我抽時間回顧了一下以往項目的前端架構，零零散散產生了許多想法，儘可能一一記錄下來，爲新的框架搭建作點準備。

       首先來聊聊CSS的的各類規範與理論。回顧過去的代碼，首先讓我頭痛不已的就是那些不知所謂的類名，以及數不清的難以維護的CSS/LESS代碼。

       我曾經對本身和前端小組的成員提出過要求，強制使用BEM方法來書寫CSS，可是在使用的過程當中，也出現了總總問題。     

       它帶來的好處是顯而易見的，每一個元素都被清晰描述出來，這也很是符合自文檔化代碼的要求。但同時也引起不少諸多問題

• 單純使用BEM方法，並無很好的去構建CSS的結構
• 複雜的業務邏輯帶來複雜的頁面，致使複雜的類名。
• 組件的嵌套以及組件狀態使得一個元素上應用大量的類，這讓第二個問題更加嚴重

      在這個過程當中，咱們開始鬆懈了要求，這使得咱們的CSS代碼又回到了混亂無序的原始時代。

      所以我想我必須去從新去探究CSS的各類規範與理論。

1、OOCSS（面向對象的CSS）

　　OOCSS有兩個主要的原則：分離結構和外觀，以及分離容器和內容。

　　與任何基於對象的編程方法同樣，OOCSS 的目的是鼓勵代碼複用，使得最終的樣式能夠更快地和更有效地添加和維護。

 　  OOCSS風格的CSS也能夠描述爲兩點：增長class、不使用繼承選擇符。

<div class="box simple">
    <div class="box-content active">
           <p class="box-title">OOCSS</p>
    </div> 
</div>    

　　上面這段代碼是一段遵循OOCSS模式的代碼

• • 其中"normal"做爲外觀和結構分離，例如"simple"可用使用的是直角，我將"simple"換成"complex"，就"box"變成了圓角。
  • 分離容器和內容，是指再也不將元素位置做爲樣式的限定詞，好比"box-title"就是文本的樣式，不管這個類做用在哪裏，都會是相同的樣式呈現。

       OOCSS的缺點

• • OOCSS適合真正的大型網站開發，由於大型網站用到的可重用性組件特別的多，若是運用在小型項目中可能見不到什麼成效。因此用不用OOCSS應該根據你的項目來決定。
  • 若是沒用巧妙的使用，建立組件可能對於你來講是一堆沒用的東西，成爲一爛攤子，給你的維護帶來意想不到的杯具，說不定仍是個維護的噩夢。
  • 最好給每個組件備寫一份說明文檔，有助於調用與維護

2、SMACSS（模塊化架構可擴展CSS）

　　咱們把上面的代碼用SMACSS風格來再次寫出來

<div class="box box-simple">
    <div class="box-content is-active">
           <p class="box-title">SMACSS</p>
    </div> 
</div>   

　　儘管SMACSS和OOCSS有許多類似之處。但不一樣點是它把樣式系統劃分爲五個具體類別。

• • 基礎
    • 若是不添加CSS類名，標記會以什麼外觀呈現
    • 例如瀏覽器的 reset 能夠寫在這裏
      

      html {} input[type=text] {} a:hover {}

  • 佈局
    • 把頁面分紅一些區域，是指整個網站的「大架構」的外觀，而非button 這種小元件的 class
    • 一般只有一個選擇器，一個 id、或一個 class。

      .header {} .articles {} .sidebar {}

  • 模塊
    • 設計中的模塊化、可複用單元，就如同代碼中的"box-title"同樣，不管這個類做用在哪裏，都會是相同的樣式呈現
  • 狀態
    • 描述在特定狀態或狀況下的顯示方式，代碼中的「is-active」就是一個狀態類
  • 主題
    • 一個可選的視覺外觀層，可讓你更換不一樣主題　　　
    • 主題能夠修改前面4個類別的樣式，且應和前面4個類別分離開來（便於切換，也就是「換膚」）。
    • SMACSS的Theme Rules不要求使用單獨的class命名，也就是說，你能夠在佈局中定義.header{ }，而後在主題中也用.header { }來定義須要修改的部分來覆蓋前面的樣式

             

3、BEM（塊元素修飾符）

　　一樣的，使用BEM風格，重寫上面的代碼

<div class="box box--simple">
    <div class="box__content box__content--active">
           <p class="box__title">BEM</p>
    </div> 
</div> 

　　BEM是一個CSS命名的命名規則，它不涉及如何書寫CSS的結構，只是建議每一個元素都添加帶有以下內容的CSS類名

• • 塊名

　　　　　　所屬組件的名稱

• • 元素

                     元素在塊裏面的名稱

• • 修飾符

　　　　　　任何與塊或元素相關聯的修飾符

　　BEM模式下，看起來很累贅、很冗餘，可是每個CSS類名都很好的描述了它的做用，在結合LESS或者SASS使用時，會使它的書寫複雜程度下降。

4、規則文檔　

　　咱們每每會很是注重大的方法，而忘記細節，而一份完善的規則文檔會時刻提醒咱們按照要求書寫代碼

　　一份好的規則文檔，應該遵循如下規範：

• • 中包含不可變的規則，而不是籠統的說明
  • 老是把規則提煉成最簡單的表達
  • 老是首先說明規則 是什麼，再說明「若是不這樣，那麼會如何」
  • 每一個規則必須包含如下詞中的一個——老是、永遠不要、只有、每個、不要、要　　

 

5、綜合方案

　　就像開篇所說同樣，單純的使用BEM並無很好的解決咱們在項目中所遇到能再的問題，反而產生了新的問題。

　　但這並非BEM的責任，CSS做爲前端架構的重要一環，咱們必需要針對項目來選擇一個合適的解決方案，而不是由於業界流行就去使用它。

　　每每單一的理論是沒法支撐起真實需求的，所以，咱們必須結合現有的方法來制定一個新的方案。好比繼續堅持BEM風格以及js hook，同時引入SMACSS、OOCSS亦或者其餘方法，而且用一份嚴格的規則文檔來規範整個項目的細節。

 

 

---

 

若是喜歡個人文章，能夠掃描二維碼關注個人微信公衆號

爭取天天都分享一點我本身的開發和練習體驗～