摘要：從試著改進(jìn)可重用做起泊學(xué)視頻回想起每次更新泊學(xué)網(wǎng)站，最讓我頭疼的，就是改寫。于是我?guī)缀醪患偎妓鞯膶懗隽诉@樣的模板它同樣包含了一個封面圖，一個標(biāo)題和一個簡介。

泊學(xué)4K視頻

回想起每次更新泊學(xué)網(wǎng)站，最讓我頭疼的，就是改寫CSS。在不同的階段，對CSS不斷深入的理解，對網(wǎng)站內(nèi)容的調(diào)整，對UI的重用需求，都影響著CSS的編寫方式，因此，稍不留神，你的代碼理解就會充斥著各種風(fēng)格和各種作用的CSS，讓你什么時候想起這些，都覺得心情不那么愉快。

因此，就和大家分享一些心得，如何理解CSS，以及如何更有效的編寫CSS。

首先，我們從一個最簡單的例子開始，回想一下你的第一個CSS例子，一定和下面這樣是類似的，所謂CSS，表達(dá)的就是頁面DOM的樣式：

  

        Hello world!
    

然后，在text-center里，我們指定文字居中對齊的樣式：

.text-center {
    text-align: center;
}

很簡單對不對？隨著樣式越寫越多，我們很快就會開始關(guān)注到一些編寫CSS的建議。例如：應(yīng)該把HTML和CSS的職責(zé)分開，HTML中不應(yīng)該包含任何和具體樣式（例如居中對齊）有關(guān)的信息，這些具體的樣式都應(yīng)該放到CSS中處理。

于是，我們就開始嘗試著用樣式要表達(dá)的語意來替換掉它表達(dá)的具體樣式：

    Hello world!

這樣看起來就好多了。無論.greeting指定的具體樣式是什么，都不影響它在HTML中表示歡迎信息樣式的含義。這樣，從理論上說，我們就可以用一套HTML模板，實現(xiàn)各種不同風(fēng)格的UI了。

于是，我們就開始基于這種語義的方式，來編寫各種界面了。例如，我們添加一個表示視頻作者的信息卡，它的HTML模板是這樣的：

  

    
    

      
Mars
      

        The creator of boxue.io. Bla bla bla...
      
    
  

同樣，在這個模板里，creator-info是一個按語義命名的樣式，接下來，是這個樣式的實現(xiàn)：

.creator-info {
  background-color: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  > img {
    display: block;
    width: 100%;
    height: auto;
  }
  > div {
    padding: 1rem;
    > h2 {
      font-size: 1.25rem;
      color: rgba(0,0,0,0.8);
    }
    > p {
      font-size: 1rem;
      color: rgba(0,0,0,0.75);
      line-height: 1.5;
    }
  }
}

它看上去的結(jié)果是這樣的：

這里，我們的重點不是這些樣式的具體內(nèi)容，而是這個CSS的結(jié)構(gòu)，如果我們把所有具體的樣式都去掉，你就會發(fā)現(xiàn)，這個樣式嚴(yán)重依賴于HTML中DOM的層次結(jié)構(gòu)：

.creator-info
  > img
  > div
    > h2
    > p

因此，盡管在HTML中，我們依靠基于語義的樣式剝離了CSS，但這種方式卻很容易在CSS中暴露過多和HTML相關(guān)的細(xì)節(jié)。因此，這樣的做法，實際上并沒有完全實現(xiàn)剝離CSS和HTML職責(zé)的目的，我們需要更好的做法。

把樣式從DOM結(jié)構(gòu)中剝離出來

為了避免樣式依賴DOM結(jié)構(gòu)的問題，我們的思路是：讓樣式的命名方式兼具格式和語義的功能。然后，在DOM里，對不同位置的元素，使用對應(yīng)的樣式。這里，我們借鑒了BEM命名方法，對我們要使用的樣式名稱，統(tǒng)一使用這樣的命名格式：主體-依賴主體的內(nèi)容__內(nèi)容的屬性：

  

    
    

      
Mars
      

        The creator of boxue.io. Bla bla bla...
      
    
  

這次，我們給DOM中，每一個需要樣式的元素綁定了有特定命名規(guī)則的樣式。這樣，在樣式表里，所有的樣式就可以是扁平結(jié)構(gòu)的了：

.creator-info {
    background-color: white;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.creator-info__image {
    display: block;
    width: 100%;
    height: auto;
}

.creator-info__content {
    padding: 1rem;
}

.creator-info__name {
    font-size: 1.25rem;
    color: rgba(0,0,0,0.8);
}

.creator-info__description {
    font-size: 1rem;
    color: rgba(0,0,0,0.75);
    line-height: 1.5;
}

還記得當(dāng)時自己把泊學(xué)網(wǎng)站樣式修改成這樣之后，著實興奮了一陣子，因為這樣的方式似乎徹底解決了HTML模板和CSS之間相互依賴的問題。

但是沒過多久，我就發(fā)現(xiàn)了新的問題。當(dāng)我編寫首頁上每個視頻系列的UI組件時，結(jié)構(gòu)上，它和之前的作者信息卡幾乎是一樣的。于是我?guī)缀醪患偎妓鞯膶懗隽诉@樣的HTML模板：

  

    
    

      
Machine Learning from Scratch
      

        Let"s create a real-world machine learning demo from scratch.
      
    
  

它同樣包含了一個封面圖，一個標(biāo)題和一個簡介。只不過，我們把樣式名稱中的主體從creator換成了series。但是，當(dāng)我要給這些新的樣式設(shè)置值的時候，就有點兒糾結(jié)了。該如何設(shè)置這些series-***的樣式呢？你可能想到了兩種選擇。

第一種，最直接的方法，就是把series-***按照creator-***復(fù)制一遍。這肯定可以工作，但是估計沒多少人會認(rèn)同這種做法，因為它違反了Don"t Repeat Yourself的原則；

第二種，如果你使用了SCSS，就可以實現(xiàn)從某個樣式繼承這樣的用法：

.series-info {
    @extend .creator-info;
}

.series-info__image {
    @extend .creator-info__image;
}

.series-info__content {
    @extend .creator-info__content;
}

.series-info__name {
    @extend .creator-info__name;
}

.series-info__description {
    @extend .creator-info__description;
}

但這樣做也有它自己的問題，@extend應(yīng)該只在彼此有關(guān)聯(lián)的樣式之間使用，而不僅僅是為了避免重復(fù)編寫相同的樣式。并且，如果稍后我們還要視頻信息卡呢？真的需要這些使用了相同樣式的selector么？顯然，目前的這種解決方案仍舊不夠理想。

實際上，造成樣式難以重用的原因，是因為selector表達(dá)的語義過于細(xì)致了。語義越細(xì)致，重用就越困難。因此，我們只要把這種綁定類似界面布局UI的selector，起個名字替代掉類似creator或series這樣的名字就好了：

.media-card {
  background-color: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.media-card__image {
    display: block;
    width: 100%;
    height: auto;
}

.media-card__content {
    padding: 1rem;
}

.media-card__name {
      font-size: 1.25rem;
      color: rgba(0,0,0,0.8);
}

.media-card__description {
      font-size: 1rem;
      color: rgba(0,0,0,0.75);
      line-height: 1.5;
}

這樣，無論是作者信息還是視頻系列信息，就都可以用同一套樣式來表示了：

  

    
    

      
Machine Learning from Scratch
      

        Let"s create a real-world machine learning demo from scratch.
      
    
  

甚至，只要UI布局和media-card描述的體系相同，這套樣式就可以直接重用。

但是情到此結(jié)束了么？顯然沒有，現(xiàn)在，你可能又會想了：假設(shè)我們需要修改作者信息卡的樣式，但仍保存視頻系列信息卡的樣式該怎么辦呢？

如果像之前一樣，它們的樣式是獨立的，只修改對應(yīng)的樣式就好了。現(xiàn)在，它們共享樣式了，我不僅要創(chuàng)建新的樣式，還要連同對應(yīng)的HTML一起修改，這樣做真的好么？

為了回答這個問題，我們得回到這一節(jié)開始提出的目的：分離HTML和CSS的職責(zé)。面對這個話題，我們直覺上就會認(rèn)為，只有徹底剝離了才算完成達(dá)成目標(biāo)。但實際的情況則是，它們兩者根本無法做到完全分離。我們只能根據(jù)自己項目的實際情況，選擇一種適合自己的方式。

對于哪些具備詳細(xì)語義（.creator-info和.series-info）的樣式而言，此時，HTML是獨立的，它完全不關(guān)心這些DOM會長成什么樣子。它只暴露了一個接口，允許我們定制其中的樣式。因此，這種選擇下的CSS不是獨立的，它依賴于樣式綁定的HTML，需要以HTML為參考，定義樣式的內(nèi)容。

對于那些具備中立語義（.media-card）的樣式而言，此時，CSS是獨立的，它完全不關(guān)心自己會被用在什么元素上。此時，HTML就不是獨立的了，它需要知道樣式表提供了哪些內(nèi)容，并基于這些內(nèi)容，來編排DOM。

實際上，這兩種方法，沒有絕對的誰優(yōu)誰劣的問題。只是你要想清楚，哪種方式更適合自己的項目。

看到這里，如果你和我之前有過類似的困惑，現(xiàn)在，你應(yīng)該躍躍欲試地要調(diào)整下自己的CSS了。先別著急，在下一節(jié)里，我們將繼續(xù)討論，如何通過合理的命名，最大化實現(xiàn)樣式的可重用目標(biāo)。