CSS進階：提升你前端水平的 4 個技巧

譯者注：隨着 Node.js 、react-native 等技術的不斷出現，和互聯網行業的創業的層出不窮，瞭解些前端知識，成爲全棧攻城師，快速的產出原型，展現你的創意，對程序員，尤爲是在創業的程序員來講，愈來愈重要，下面咱們就跟隨著名國外開發者網站上的熱推文章《Leveling up in CSS》，從提高你的CSS技巧開始。

 

CSS 在剛開始學習的時候看起來很是簡單。畢竟，它僅僅就是些樣式而已，事實上是這樣嗎？

可是，隨着你的不斷了解。很快，你會發現 CSS 沒你想象的那麼簡單，它複雜且有深度。

作好這四件事情，能讓你在大規模使用 CSS 的時候保證代碼的健壯性：使用適當的語義，模塊化，採用統一的命名規範，遵循單一功能原則。

使用適當的語義

在 HTML 和 CSS 編程中有語義標註的概念。語義是指單詞的含義和他們間的關係。在 HTML 編程中，意味着你須要使用一個合適的標籤名字來標記。下面是一個經典的例子。

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

富有語義的 HTML 是很是簡單明確的。另外一方面，富有語義的 CSS 則是更抽象和主觀的。編寫富有語義的 CSS 意味着在選擇類型的時候，類名要傳達出結構和功能信息。類名要很容易被理解。確保它們不要太具體、太特殊。這樣，你就能夠複用它了。

 

爲了闡述什麼是一個良好的類名，請看這個簡化了的 Medium 網站的 CSS 例子。

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

經過這些代碼，你能夠當即識別出它們的結構、功能和含義。父節點的類名是 stream ，內容是一個文章列表。它的子節點的類名是 streamItem ，內容是文章列表中的一篇具體的文章。這使咱們很容易的瞭解到父節點和子節點之間的關係。而且，這些類能夠在每個有文章功能的頁面中使用。

你能夠像閱讀一本書同樣讀 HTML 和 CSS。它會給你講一個故事。經過故事你能夠了解故事中的每個角色和他們之間的關係。語義豐富的 CSS 代碼容易理解，更便於維護。

若果你想進一步瞭解語義相關的內容，看看 《怎麼富有語義的爲類命名》、《CSS 命名不簡單》 和 《富有語義和容易識別（的代碼命名）》，再看 《關於 HTML 命名和前端架構》。

模塊化

在這個充滿了組件庫（以 React 爲例）的時代，模塊化就是王者。組件就是由已經解構了的接口建立的可組合的模塊。下面是一個Product Hunt（一種發佈好的創業項目的網站）前端頁面。做爲練習，讓咱們將這個頁面分解成一系列的組件。

 

每種顏色框表明一個組件，stream 節點下分爲好多個 stream item 子節點。

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

大多數組件均可以分解爲更小的組件。

 

每個 stream item 組件都有一個縮略圖和一個特點的產品信息。

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

因爲 stream 組件和它的子控件是徹底獨立的，你能夠很容易的調整或者更換 post 組件，而且這不會對 stream 組件產生任何影響。

使用組件的思想將會使你的代碼解耦。解耦的代碼越多，你的類之間的依賴就越低。這會讓你的代碼更容易修改，而且使你的代碼更長時間的工做下去而不用修改它。

 

組件驅動設計

模塊化你的 CSS 時，首先將你的設計分解成多個組件。你可使用紙和筆，也可使用相似 Illustrator 或者 Sketch 這類的軟件。肯定你將要如何命名這些組件，同時理清各個組件之間的關係。

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

採用統一的命名規範

目前有幾十個不一樣版本的 CSS 命名規範。有些人對他們選擇的命名規範極其篤定，認爲他們的比別人的更好。事實上，不一樣的人喜歡不一樣的命名規範。我聽到的最好的建議是：選擇你以爲最合適的命名規範。

下面簡單列舉一下經常使用的命名規範：

• Object oriented CSS OOCSS

• Block element modifier (BEM)

• Scalable and modular architecture for CSS (SMACSS)

• Atomic

我最喜歡的命名規範是 BEM。BEM 表明塊(block)、元素（element）和修飾符（modifier）。Yandex，在俄羅斯的至關於谷歌的搜索引擎，爲了解決他們 CSS 代碼庫中的縮放問題而提出了它（它指BEM）。

 

BEM 是一個極其簡單——又極其嚴格——的命名規範。

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

塊（Blocks）表明高級別的類。元素（Elements）是塊的子模塊。修飾符（modifiers）表明不一樣的狀態。

 

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

在上面的示例中， search 是塊（block），search button是它的元素（element）。若是你想要更改按鈕的狀態，咱們能夠爲按鈕增長一個修飾符，例如 active 。

關於命名規範要記住的一件事是，不管你喜歡哪一種命名規範，你會常常繼承或者工做在不一樣標準的代碼庫上。請敞開心扉去學習新的標準，用不一樣的思惟去思考 CSS 。

你能夠在《深刻學習 BEM 語法》、《BEM 101》和《BEM 簡介》上看到更多關於 BEM 的信息。想要了解不一樣的命名規範，參見《OOCSS、ACSS、BEM、SMACSS：這些是什麼？我該用哪一個？》。

遵循單一功能原則

單一功能原則規定每一個模塊和類都應該有一個單一的功能，而且該功能應該由這個類徹底封裝起來。

在 CSS 中，單一功能原則表明每一段代碼、類和模塊只作一件事。當咱們提交 CSS 文件時，這意味着每一個獨立的組件（例如輪播效果和導航欄）都應該有本身的 CSS 文件。

/
 components
 |-  carousel
 |- |-  carousel .css
 |- |-  carousel.partial . html
 |- |-  carousel . js
 |-  nav
 |- |-  nav . css
 |- |- nav .partial . html
 |- |-  nav . js

另一個常見的組織文件的方式是按照功能將文件分組。舉個栗子，如上面所示，全部和輪播效果組件有關的文件都被分類到了一塊兒。採用這種方式可讓你更容易的找到相關文件。

除了對組件的樣式進行分離以外，最好利用單一功能原則對全局樣式也進行分離。

/ base
 |-  application . css
 |-  typography . css
 |-  colors . css
 |- grid . css

在這個例子中，每一個相關的樣式被分離到本身的樣式文件中。這樣，若是你想要修改樣式中的顏色，那麼你將會很容易的找到它。

不管你使用哪一種方式組織文件結構，儘可能在決定的時候參考單一功能原則。一旦有某個文件開始變的臃腫，那麼考慮按照邏輯功能將它分紅多個部分。

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

當單一功能原則應用於你的每個 CSS 類選擇器中時，這意味着每個類選擇器都有着惟一的功能。換句話說，要根據不一樣關注點將樣式分離到不一樣的類選擇器中。下面是個經典的例子：

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

在上面的例子中，咱們將關注點耦合了。splash 這個類不但包含了自己的樣式和邏輯，同時也包含了它的子節點的。爲了解決這個問題，咱們能夠將這段代碼分離爲兩個新的類。

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

如今咱們有 splash 和 splash content 兩個類。咱們能夠將 splash 做爲一個通常的全屏類，它能夠擁有任何子節點。全部子節點關注的屬性，都在 splash content 中，與父節點的屬性是徹底解耦的。

你能夠經過閱讀下列文章進一步瞭解單一功能原則在樣式表和類中的應用。《單一功能原則在 CSS 中的應用》和《單一功能原則》。

簡單賽過複雜

若是你問任何一個成功的前端開發工程師或者 CSS 架構師，他們會告訴你，他們歷來沒有對本身的代碼徹底滿意。寫好 CSS 是一個不斷迭代的過程。從簡單開始，遵循基本的 CSS 規則和樣式指南，而後不斷迭代。

我很想知道你的 CSS 學習之路。你喜歡的命名規範是什麼？你是怎樣組織你的代碼文件的？你能夠隨時經過留言或者在 Tweet 上告訴我。

我有一個前端學習交流QQ羣：328058344 若是你在學習前端的過程當中遇到什麼問題，歡迎來個人QQ羣提問，羣裏天天還會更新一些學習資源。禁止閒聊，非喜勿進。