隨(sui)著 Node.js 、react-native 等(deng)技術(shu)的(de)不斷出(chu)現，和互聯網(wang)行業的(de)創(chuang)業的(de)層出(chu)不窮，了(le)解些前端知識，成為全棧攻城師，快速的(de)產出(chu)原型(xing)，展示你的(de)創(chuang)意，對程序(xu)員(yuan)，尤其是在創(chuang)業的(de)程序(xu)員(yuan)來(lai)說(shuo)，越來(lai)越重要，下面我們就跟隨(sui)著名國(guo)外(wai)開發者網(wang)站上的(de)熱(re)推文章《Leveling up in CSS》，從提升你的(de)CSS技巧開始。 

 

 

      CSS 在剛開始學習的時候(hou)看起來(lai)非常簡單。畢竟，它(ta)僅(jin)僅(jin)就是些樣式而(er)已，事實上是這樣嗎?

 

      但是，隨著你的(de)不斷了解。很(hen)快(kuai)，你會(hui)發現(xian) CSS 沒你想(xiang)象的(de)那么簡(jian)單，它復雜且(qie)有深度。

 

      做好這四件事情，能讓你在大規(gui)模使(shi)用 CSS 的(de)時候保證代碼的(de)健壯性：使(shi)用適當的(de)語義，模塊化(hua)，采(cai)用統一(yi)(yi)的(de)命名規(gui)范，遵(zun)循單一(yi)(yi)功(gong)能原則。

 

使用適當(dang)的(de)語義

 

      在 HTML 和 CSS 編(bian)程(cheng)中(zhong)有語義標(biao)注的(de)(de)(de)概念(nian)。語義是指單詞的(de)(de)(de)含(han)義和他們間(jian)的(de)(de)(de)關(guan)系。在 HTML 編(bian)程(cheng)中(zhong)，意(yi)味著你需要(yao)使(shi)用一個合適的(de)(de)(de)標(biao)簽(qian)名(ming)字來標(biao)記。下面是一個經(jing)典的(de)(de)(de)例子。

 

      <!-- bad -->  <div class=”footer”></div>  <!-- good -->  <footer></footer>  

 

      富(fu)有(you)語(yu)(yu)義(yi)(yi)的 HTML 是非常簡(jian)單明確(que)的。另一(yi)方面，富(fu)有(you)語(yu)(yu)義(yi)(yi)的 CSS 則(ze)是更抽象和主觀的。編寫富(fu)有(you)語(yu)(yu)義(yi)(yi)的 CSS 意味著在(zai)選擇(ze)類型的時候(hou)，類名要(yao)傳達出結(jie)構和功能信息。類名要(yao)很容易被理(li)解。確(que)保它們不要(yao)太具體、太特殊(shu)。這(zhe)樣(yang)，你(ni)就可以(yi)復用它了(le)。

 

 

      為了(le)闡述什么(me)是一個良好的類名(ming)，請(qing)看這個簡化了(le)的 Medium 網站的 CSS 例子。

 

      <div class="stream">    <div class="streamItem">      <article class="postArticle">        <div class="postArticle-content">          <!-- content -->        </div>      </article>    </div>  </div>  

 

      通過這(zhe)些(xie)代碼，你可(ke)以(yi)立即識別出它(ta)們的(de)(de)(de)結構、功能(neng)和(he)含義(yi)。父節(jie)(jie)點(dian)(dian)(dian)的(de)(de)(de)類(lei)(lei)(lei)名是 stream ，內(nei)容是一(yi)(yi)個文章(zhang)(zhang)列表(biao)。它(ta)的(de)(de)(de)子節(jie)(jie)點(dian)(dian)(dian)的(de)(de)(de)類(lei)(lei)(lei)名是 streamItem ，內(nei)容是文章(zhang)(zhang)列表(biao)中(zhong)的(de)(de)(de)一(yi)(yi)篇具體的(de)(de)(de)文章(zhang)(zhang)。這(zhe)使我(wo)們很容易(yi)的(de)(de)(de)了解到父節(jie)(jie)點(dian)(dian)(dian)和(he)子節(jie)(jie)點(dian)(dian)(dian)之(zhi)間的(de)(de)(de)關系。并(bing)且，這(zhe)些(xie)類(lei)(lei)(lei)可(ke)以(yi)在每一(yi)(yi)個有文章(zhang)(zhang)功能(neng)的(de)(de)(de)頁(ye)面中(zhong)使用。

 

      你可以(yi)像閱讀一本書一樣讀 HTML 和 CSS。它會(hui)給你講(jiang)一個故(gu)事(shi)。通過(guo)故(gu)事(shi)你可以(yi)了解故(gu)事(shi)中(zhong)的(de)每一個角色和他們之(zhi)間的(de)關系。語義(yi)豐富(fu)的(de) CSS 代(dai)碼容易理解，更便于維護。

 

  &nbsp;   若果你想進一(yi)步了解語義相(xiang)關的(de)內(nei)容(rong)(rong)，看看 《怎么富(fu)(fu)有語義的(de)為類(lei)命(ming)名(ming)(ming)》、《CSS 命(ming)名(ming)(ming)不簡(jian)單》 和 《富(fu)(fu)有語義和容(rong)(rong)易識別(的(de)代碼命(ming)名(ming)(ming))》，再看 《關于 HTML 命(ming)名(ming)(ming)和前端架(jia)構》。

 

模塊化

 

      在這(zhe)個(ge)充滿了組(zu)件庫(以 React 為(wei)例)的(de)時(shi)代，模(mo)(mo)塊化就(jiu)是王者。組(zu)件就(jiu)是由已經解構了的(de)接口(kou)創建的(de)可組(zu)合(he)的(de)模(mo)(mo)塊。下(xia)面(mian)是一(yi)個(ge)Product Hunt(一(yi)種(zhong)發布好(hao)的(de)創業(ye)項目的(de)網站)前端頁面(mian)。作為(wei)練習，讓我們將這(zhe)個(ge)頁面(mian)分解成一(yi)系列的(de)組(zu)件。

 

 

       每(mei)種顏色框(kuang)代表一個組件，stream 節(jie)點下(xia)分為好多個 stream item 子節(jie)點。

 

      <div class="stream">    <div class="streamItem">      <!-- product info -->    </div>  </div>  

 

  &nbsp;   大多數組件都可以分解(jie)為更小(xiao)的組件。

 

 

      每(mei)一(yi)(yi)個(ge)(ge) stream item 組件都有一(yi)(yi)個(ge)(ge)縮略圖和一(yi)(yi)個(ge)(ge)特色的產品信息。

 

      <!-- STREAM COMPONENT -->  <div class="stream">    <div class="streamItem">      <!-- POST COMPONENT -->      <div class="post">        <img src="thumbnail.png" class="postThumbnail"/>        <div class="content">         &nbsp;<!-- product info -->        </div>      </div>    </div>  </div>  

 

      由于(yu) stream 組(zu)件(jian)和它(ta)的子控件(jian)是完(wan)全獨立的，你可(ke)以(yi)很容易的調整或(huo)者更換 post 組(zu)件(jian)，并且這不會對 stream 組(zu)件(jian)產生(sheng)任何影響。

 

      使用(yong)(yong)組件的(de)(de)(de)思想將會使你(ni)的(de)(de)(de)代(dai)碼解(jie)耦(ou)(ou)。解(jie)耦(ou)(ou)的(de)(de)(de)代(dai)碼越多，你(ni)的(de)(de)(de)類之(zhi)間的(de)(de)(de)依賴就越低。這會讓你(ni)的(de)(de)(de)代(dai)碼更(geng)容易修改(gai)(gai)，并且(qie)使你(ni)的(de)(de)(de)代(dai)碼更(geng)長(chang)時間的(de)(de)(de)工作下去而(er)不用(yong)(yong)修改(gai)(gai)它。

 

 

組(zu)件驅動設計

 

      模塊化你(ni)(ni)的(de) CSS 時，首先將(jiang)你(ni)(ni)的(de)設計分解成多(duo)個組(zu)件(jian)。你(ni)(ni)可以使用紙和筆，也可以使用類似 Illustrator 或者 Sketch 這(zhe)類的(de)軟件(jian)。確定你(ni)(ni)將(jiang)要如何命名這(zhe)些組(zu)件(jian)，同時理清各個組(zu)件(jian)之間(jian)的(de)關系(xi)。

 

      閱讀更多關于 CSS 組件驅動的(de)文章，詳見《CSS 建(jian)構：可擴(kuo)展和(he)模塊(kuai)化處理》、《使用 Sass 編(bian)寫模塊(kuai)化的(de) CSS》和(he)《模塊(kuai)化你的(de)前端(duan)代碼(ma)——編(bian)寫高可維護和(he)條理清晰的(de)代碼(ma)》。

 

      采用統一的命名規范

 

      目前有(you)幾十個(ge)不同版本的(de)(de)(de) CSS 命(ming)名規(gui)范。有(you)些人對他(ta)們(men)選擇(ze)的(de)(de)(de)命(ming)名規(gui)范極(ji)其篤定，認(ren)為他(ta)們(men)的(de)(de)(de)比別人的(de)(de)(de)更好(hao)。事(shi)實(shi)上，不同的(de)(de)(de)人喜歡不同的(de)(de)(de)命(ming)名規(gui)范。我(wo)聽到的(de)(de)(de)最好(hao)的(de)(de)(de)建(jian)議是：選擇(ze)你覺得(de)最合適(shi)的(de)(de)(de)命(ming)名規(gui)范。

 

      下面簡單(dan)列舉一(yi)下常用的命名規范：

 

     ; Object oriented CSS OOCSS Block element modifier (BEM) Scalable and modular architecture for CSS (SMACSS) Atomic

 

&nbsp;     我最喜(xi)歡的(de)命名規范是 BEM。BEM 代(dai)表塊(block)、元素(element)和修飾符(modifier)。Yandex，在(zai)俄羅斯(si)的(de)相(xiang)當于(yu)谷歌的(de)搜(sou)索引擎(qing)，為了解決他(ta)們 CSS 代(dai)碼庫中的(de)縮放問(wen)題而(er)提出了它(ta)(它(ta)指BEM)。

 

 

       BEM 是一(yi)個(ge)極(ji)(ji)其簡單(dan)——又極(ji)(ji)其嚴(yan)格——的命(ming)名規范。

 

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

 

      塊(kuai)(Blocks)代表高級別的(de)類。元素(Elements)是塊(kuai)的(de)子(zi)模塊(kuai)。修飾符(modifiers)代表不同的(de)狀態。

 

 

      <;div class="search">    <input type="search__btn search__btn--active" />  </div>  

 

      在上面的(de)(de)示例(li)(li)中， search 是塊(block)，search button是它的(de)(de)元素(element)。如(ru)果你想要更改(gai)按鈕(niu)的(de)(de)狀態，我們可(ke)以為按鈕(niu)增加(jia)一(yi)個修飾符，例(li)(li)如(ru) active 。

 

      關于命名規范(fan)要記住(zhu)的一件事(shi)是，無論你(ni)喜歡哪種(zhong)命名規范(fan)，你(ni)會(hui)經(jing)常繼(ji)承或者工(gong)作(zuo)在不(bu)同標準(zhun)的代碼庫上(shang)。請敞開心扉去學習新的標準(zhun)，用不(bu)同的思維去思考(kao) CSS 。

 

      你可以在《深(shen)入學習 BEM 語法》、《BEM 101》和《BEM 簡介》上看到更(geng)多關于 BEM 的信息。想要了解不同(tong)的命名規(gui)范，參見《OOCSS、ACSS、BEM、SMACSS：這些是(shi)什么?我該用哪個?》。 

 

遵循單(dan)一(yi)功能原則

 

      單一(yi)功能(neng)原則規定每個(ge)(ge)模(mo)塊和類都(dou)應(ying)該有一(yi)個(ge)(ge)單一(yi)的(de)功能(neng)，并且該功能(neng)應(ying)該由這個(ge)(ge)類完全封裝起來。

 

      在 CSS 中，單(dan)一(yi)功能原則代(dai)表(biao)每一(yi)段(duan)代(dai)碼、類和模塊只做(zuo)一(yi)件(jian)(jian)(jian)事。當我(wo)們提交 CSS 文件(jian)(jian)(jian)時，這意味著每個獨(du)立(li)的(de)組件(jian)(jian)(jian)(例如輪播效果和導航(hang)欄)都應(ying)該有自己(ji)的(de) CSS 文件(jian)(jian)(jian)。

 

      /components &nbsp;  |- carousel    |- |- carousel.css    |- |- carousel.partial.html    |- |- carousel.js    |- nav    |- |- nav.css    |- |- nav.partial.html    |- |- nav.js  

 

      另外一個常(chang)見的(de)組(zu)織文(wen)(wen)件的(de)方式(shi)是按(an)照功(gong)能將(jiang)文(wen)(wen)件分組(zu)。舉個栗子，如上面所(suo)示，所(suo)有和(he)輪(lun)播效果組(zu)件有關(guan)的(de)文(wen)(wen)件都被分類到(dao)了一起。采用這種(zhong)方式(shi)可(ke)以(yi)讓(rang)你更容易的(de)找到(dao)相(xiang)關(guan)文(wen)(wen)件。

 

      除了對組(zu)件的樣(yang)式(shi)進行分(fen)離之外，最好(hao)利用單一功能(neng)原則對全局樣(yang)式(shi)也進行分(fen)離。

 

      /base  |- application.css  |- typography.css  |- colors.css &nbsp;|- grid.css  

 

      在(zai)這(zhe)個例(li)子中(zhong)，每(mei)個相關的(de)樣式被分離到自己的(de)樣式文件中(zhong)。這(zhe)樣，如果你(ni)(ni)想要修改樣式中(zhong)的(de)顏色，那么你(ni)(ni)將會(hui)很容易的(de)找到它。

 

      無(wu)論你(ni)使用哪種(zhong)方式組織(zhi)文件結構，盡量在決(jue)定的時候參考(kao)單一(yi)(yi)功(gong)(gong)能原則。一(yi)(yi)旦有某個文件開始變的臃腫(zhong)，那么考(kao)慮按照邏(luo)輯功(gong)(gong)能將它分(fen)(fen)成多個部分(fen)(fen)。

 

      更多有關組織文(wen)件結構和 CSS 架構的文(wen)章，詳見《Sass 審美 1：架構和組織樣式文(wen)件》和《可(ke)擴展和可(ke)維護的 CSS 架構》。

 

      當單(dan)一功(gong)能(neng)原則應用于你的(de)每(mei)一個 CSS 類選(xuan)(xuan)擇器(qi)(qi)中時(shi)，這意味著每(mei)一個類選(xuan)(xuan)擇器(qi)(qi)都有著唯(wei)一的(de)功(gong)能(neng)。換句話說(shuo)，要根(gen)據不同(tong)關注點(dian)將樣式(shi)分離到不同(tong)的(de)類選(xuan)(xuan)擇器(qi)(qi)中。下面是個經(jing)典的(de)例子：

 

      .splash {    background: #f2f2f2;    color: #fffff;    margin: 20px;    padding: 30px;    border-radius: 4px;    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;  }  

 

      在(zai)上面的(de)例子中，我們(men)將(jiang)關注點耦合了。splash 這(zhe)個類(lei)不但包(bao)含(han)(han)了本身(shen)的(de)樣式和(he)邏輯，同時也包(bao)含(han)(han)了它的(de)子節(jie)點的(de)。為了解決這(zhe)個問(wen)題，我們(men)可(ke)以將(jiang)這(zhe)段代碼分離(li)為兩個新的(de)類(lei)。

 

      .splash {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0; &nbsp;}  

 

      現在(zai)我們有 splash 和 splash content 兩個類。我們可以(yi)將(jiang) splash 作為一個一般(ban)的全屏類，它(ta)可以(yi)擁有任何子節點。所有子節點關注的屬性，都在(zai) splash content 中(zhong)，與父節點的屬性是(shi)完全解(jie)耦的。

 

簡(jian)單勝(sheng)過復雜

 

      如果你(ni)問任何一(yi)個(ge)成功的(de)(de)前端開發工程師(shi)或者 CSS 架構師(shi)，他們會告訴你(ni)，他們從(cong)來沒有對自己的(de)(de)代(dai)碼完全(quan)滿意。寫好 CSS 是(shi)一(yi)個(ge)不(bu)斷迭(die)代(dai)的(de)(de)過程。從(cong)簡(jian)單開始，遵循(xun)基本的(de)(de) CSS 規則和(he)樣(yang)式指(zhi)南，然后不(bu)斷迭(die)代(dai)。