一些編寫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可以让我们有一套规范，确保页面一致性

一致性

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覆盖会导致重新渲染，影响性能。