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

泊學(xué)4K視頻

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

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

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

  

        Hello world!
    

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

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

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

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

    Hello world!

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

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

  

    
    

      
Mars
      

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

同樣，在這個(gè)模板里，creator-info是一個(gè)按語(yǔ)義命名的樣式，接下來(lái)，是這個(gè)樣式的實(shí)現(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é)果是這樣的：

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

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

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

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

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

  

    
    

      
Mars
      

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

這次，我們給DOM中，每一個(gè)需要樣式的元素綁定了有特定命名規(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)時(shí)自己把泊學(xué)網(wǎng)站樣式修改成這樣之后，著實(shí)興奮了一陣子，因?yàn)檫@樣的方式似乎徹底解決了HTML模板和CSS之間相互依賴的問題。

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

  

    
    

      
Machine Learning from Scratch
      

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

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

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

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

.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么？顯然，目前的這種解決方案仍舊不夠理想。

實(shí)際上，造成樣式難以重用的原因，是因?yàn)閟elector表達(dá)的語(yǔ)義過(guò)于細(xì)致了。語(yǔ)義越細(xì)致，重用就越困難。因此，我們只要把這種綁定類似界面布局UI的selector，起個(gè)名字替代掉類似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;
}

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

  

    
    

      
Machine Learning from Scratch
      

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

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

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

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

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

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

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

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

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