摘要：從試著改進可重用做起泊學視頻回想起每次更新泊學網站，最讓我頭疼的，就是改寫。于是我幾乎不假思索的寫出了這樣的模板它同樣包含了一個封面圖，一個標題和一個簡介。

泊學4K視頻

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

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

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

  

        Hello world!
    

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

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

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

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

    Hello world!

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

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

  

    
    

      
Mars
      

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

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

.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;
    }
  }
}

它看上去的結果是這樣的：

這里，我們的重點不是這些樣式的具體內容，而是這個CSS的結構，如果我們把所有具體的樣式都去掉，你就會發現，這個樣式嚴重依賴于HTML中DOM的層次結構：

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

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

把樣式從DOM結構中剝離出來

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

  

    
    

      
Mars
      

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

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

.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;
}

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

但是沒過多久，我就發現了新的問題。當我編寫首頁上每個視頻系列的UI組件時，結構上，它和之前的作者信息卡幾乎是一樣的。于是我幾乎不假思索的寫出了這樣的HTML模板：

  

    
    

      
Machine Learning from Scratch
      

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

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

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

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

.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應該只在彼此有關聯的樣式之間使用，而不僅僅是為了避免重復編寫相同的樣式。并且，如果稍后我們還要視頻信息卡呢？真的需要這些使用了相同樣式的selector么？顯然，目前的這種解決方案仍舊不夠理想。

實際上，造成樣式難以重用的原因，是因為selector表達的語義過于細致了。語義越細致，重用就越困難。因此，我們只要把這種綁定類似界面布局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描述的體系相同，這套樣式就可以直接重用。

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

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

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

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

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

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

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