一些編寫css的建議

javascripty已經走上工程化的道路了，各種mvm，mvvm架構已經讓人目不暇接了，這裡就不討論js了。我來講下我在實際工作中編寫CSS的一些經驗吧，當然很多人也總結過這樣的經驗，我說的肯定沒有哪些大牛寫的好，我只是簡單的把自己的工作經驗拿出來與大家分享下。

工欲善其事，必先利其器

在編寫css的時候，你需要至少掌握一個開發工具，無論是SASS，還是LESS，本質上來說他們一樣的，只是文法有點不一樣。如果你還是在純手寫css，那麼請儘快瞭解它們，並根據自己的習慣選擇其中一個並使用他們。個人而言，我比較喜歡sass，更符合我的書寫習慣。也有很多人喜歡Less，他們覺得less文法更加便捷。

什麼SASS/LESS

SASS（LESS）是CSS3的一個擴充，增加了規則嵌套、變數、混合、選取器繼承等等。通過使用命令列的工具或WEB架構外掛程式把它轉換成標準的、格式良好的CSS代碼。

為什麼需要SASS/LESS

它們作為一個開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。
它們也是編寫模組化、可維護的CSS的基石。

該如何使用

網上關於SASS/LESS的教程一大堆，我這裡不浪費篇幅寫基本文法了。
可以自己去網上搜尋，它們都差不多，學了一個基本都可以使用了：

下面的內容我用SASS舉例，內容不限於SASS，LESS同樣適用！

神說，無規矩不成方圓

是的，無規矩不成方圓，你需要瞭解一種css命名規範或者制定自己的規範（不建議自訂，不利於團隊合作）;

為什麼需要有一種命名規範呢？

當你編寫過大量css時候，你就發現沒有一種有效命名規範會讓你痛不欲生。如果你在一個稍微大一點的項目中，或者在與其他人合作開發的過程，這種感覺特別明顯。因為當你為css命名的時候會發現這個命名在別的地方使用了，或者隊友已經使用過了，你必須重新命名。久而久之，css的命名就會雜亂無章而且又臭又長，一眼望去根本猜不到這個命名的意義。

BEM命名規範

各種命名規範是仁者見仁，智者見智，在這裡我介紹下BEM命名規範，我介紹的不一定就是適合你的，你需要自己思考何種命名規範適合自己。。

BEM是由Yandex團隊提出的一種CSS Class 命名方法，旨在更好的建立CSS/Sass模組。

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）。

●block: 可以理解為一個地區、一個組件或者一個區塊層級元素，具體如何區分需要根據實際情況具體分析；

●block__element： 就是一個上面的block裡面的元素，比如說導航（nav：block）裡面有a標籤（a: element）就是一個元素， block與element使用兩個底線連結；

●block__element–modifier： 我的理解是狀態或屬性。比如element裡面的a標籤，它有active、hover、normal三種狀態，這三種狀態就是modifier。midifier是使用兩個“–”中橫線串連

就上面所說的例子我用實際的代碼來示範下：

<!-- HTML結構 --><nav class="nav">  <a href="#" class="nav__item nav__item--active">當前頁：active</a>  <a href="#" class="nav__item nav__item--hover">假設滑鼠在這裡要加個hover的class</a>  <a href="#" class="nav__item nav__item--normal">假設需要加個normar的狀態</a></nav>

// SASS寫法.nav{  &__item{    &--active{      <!-- active樣式 -->    }    &--hover{      <!-- hover樣式 -->    }    &--normal{      <!-- normal樣式 -->    }  }}

/* 編譯後的css */.nav{ }.nav__item{ }.nav__item--active{ }.nav__item--hover{ }.nav__item--normal{ }

從上面的例子可以一眼看出css的含義，而且編譯後的css沒有任何的嵌套，但是SASS的結構卻很清晰，一目瞭然。

由此可見，使用SASS配合BEM可以寫出一份易讀、可維護、模組化的代碼；

神說，我不認識你

一份可讀性的SASS必須有一份說明，一個檔案，一個函數都需要一份說明。

對於一份SASS檔案，你至少需要說明兩點，這份SASS是公用還是私人、哪個頁面哪個部分

@charset "utf-8"/** 預定義函數* author：xxx* time:xxxx-xx-xx*//** 清除浮動* use: @include clearfix();* author: xxx* time: xxxx-xx-xx*/@mixin clearfix(){  *zoom: 1;  &:before,  &:after {      content: "";      display: table;  }  &:after {      clear: both;      overflow: hidden;  }}

神說，世界要統一

●reset

css reset必不可少，網上有很多css reset的代碼，compass也有reset的module,只需要@import “compass/reset”。如果你覺得這些代碼太冗餘，太多，你至少需要保證你的css有margin和padding的reset，這樣才可以保證在各個瀏覽器中css有相同的樣式。

*{  margin: 0;  padding: 0;}

●間距/行距/邊距

●字型大小

●顏色

●層級

●高度

……

為什麼需要variables

使用一份單獨的variables，好處很多，最大的好久就是可維護性，誰用誰知道！

可維護性

●等你開發完了，拿給設計師驗收，設計師說這裡不好，換個顏色！—— 沒事，我改個變數！

●產品說，這裡不好，列表間距太大了，小螢幕只顯示那麼一點點！—— 沒事，我改個變數！

●來來來，產品說我們換一套皮膚！ —— 沒事，我重新定義一份變數！

……

這些例子可以讓你明白有一份variables是多麼重要了吧。其實這些只是在可維護方面的好處。作為一名前端，我們是最接近使用者的工程師，我們不能僅僅停留在代碼層面，更需要的是站在使用者體驗的角度思考問題，而variables可以讓我們有一套規範，確保頁面一致性

一致性

FE是面向使用者的，我們需要對使用者負責。設計師在設計頁面的時候，不能所有的像素的都很精確，不可能每次的顏色都是毫無差錯的。所以在這時候，就需要規範了，如果設計師沒有規範，那我們自己制定一套規範。例如：

●同一個項目，一個頁面的列表高度是20px,另一個頁面的列表是21px，這時我們無需理會，直接使用我們之前定義的列表高度進行開發。

●同一個頁面，有兩個error的顏色#dc4c4c和#d84a4a，我們也無需理會，使用統一的error顏色變數；

這些是使用者體驗的細節，通過一份variables可以讓我們保持頁面的一致性。
這裡只是略微提下使用者體驗，之後我再寫一篇《前端工程師必須重視的使用者體驗》來詳細講解下使用者體驗。

module（模組化，基於SASS/LESS）

模組化在js中經常聽到，對於css來說，模組化對於易讀性和可維護性同樣重要。那麼如何來做模組化呢？

多檔案夾

建立多個檔案夾，分類存放sass檔案。例如：將variables、mixin、公用樣式、私人樣式分成多個檔案夾存放；

多檔案

同一個檔案夾的sass可以按模組、功能等等分成多個檔案，最終用@import 匯入

這樣說的有點粗糙，我舉個例子吧(底線開頭的sass檔案不會編譯單獨css檔案)

——sass  ——config                //基本變數  ——mixin                 //函數  ——common                //公用    ——header    ——aside      ——_list.scss      ——_nav.scss      ——_base.scss  ——compoment             //組件樣式    ——dropdown    ——lightbox  ——page    ——index               //首頁      ——_ad.scss           //廣告樣式      ——_content.scss      //內容資訊      ——_info.scss         //個人資訊樣式      ——_base.scss         //index樣式，@import 'ad';@import 'content';@import 'info';    ——write                   ——preview              ——_aside.scss       //preview頁面專屬側邊欄    ——about  ——main.scss             //匯入所需要的樣式，最終產生一個main.css

如上面所示的目錄結構，能讓人一目瞭然sass的目錄的結構，維護的時候可以快速準確的找到檔案。
如果是多頁面的項目，也可以最大限度複用代碼，而且可以匯出公用樣式，利用緩衝提高載入速度，不用每個頁面都重複寫一樣的代碼。

注意：common檔案夾的公用樣式必須是其他頁面所共有的樣式，如果有些頁面有特殊的樣式，應該將會覆蓋的css抽取出來，在頁面中分別匯入不同的私人樣式。

根據命名規則限定使用樣式

比如說preview頁面有一個私人aside樣式，可以在這樣寫preview裡面的_aside.scss：

@charset "utf-8"/** 預覽頁面側邊欄* author：xxx* time:xxxx-xx-xx*/@import '../../common/aside/base'.preview{  .aside{    /* css */    &__item{      /* css */    }  }}

這裡需要注意的是，css覆蓋會導致重新渲染，影響效能。

