CSS學習筆記(十六) CSS最佳實踐之可維護性篇

前言

CSS代碼難維護衆所皆知。

• 爲一個元素設置樣式的方式能夠經過定義的class、定義的id、元素的標籤名、元素的屬性等選擇器以及這些選擇器的組合來實現；

• 做用於某個元素上的樣式又可能來自單個樣式規則，也可能來自多個樣式的組合，還可能來自父元素；

• CSS樣式能夠定義在元素的style屬性裏面，也能夠定義在頁面head部分，還能夠定義在單獨的CSS文件中。

CSS樣式定義上的靈活性帶來的是CSS代碼的多樣性，若是毫無章節地使用這些定義樣式的方式，勢必會致使CSS代碼的混亂和難以維護。本文將拋磚引玉，總結出幾個方面來討論如何編寫可維護性的CSS代碼。

Web前端開發入門難度並不高，可是初學者若是沒有一個很好地學習和編碼習慣，則開發水平的提升速度會變得很慢。 by 《Web前端開發最佳實踐》黨建

1.代碼規範

無論有多少人共同參與同一項目，必定要確保每一行代碼都像是同一我的編寫的。by 編碼規範 @mdo

命名規範和格式規範是代碼規範中最基本的規範，任何代碼的混亂都是從命令和格式的混亂開始，而意義明確的命名和規整的代碼格式則提升了代碼的可讀性與可維護性，給閱讀者和維護者留下來良好的第一印象。每一個開發團隊都應該有一套本身的規範。

• 組成類名稱的關鍵字的鏈接符爲中劃線-。

.page-content-title {
    ...
}

• 爲了不class命名的重複，命名時取父元素的class名做爲前綴。

/* 父元素的樣式聲明 */
.page-content {
    ...
}

/* 子元素的樣式聲明 */
.page-content-body {
    ...
}

• 在CSS樣式定義中，左大括號放置在選擇器的同一行，並和選擇器之間添加一個空格分隔，在保證可讀性的基礎上縮短代碼的行數；在樣式聲明中，屬性名稱和值之間用一個空格分隔，提升代碼可讀性。

/* 不推薦 */
.page-content-title
{
    border-left:1px solid #fff;
} 

/* 不推薦 */
.page-content-title{border-left:1px solid #fff;}

/* 推薦 */
.page-content-title {
    border-left: 1px solid #fff;
}

單行顯示很差註釋，很差備註，這應該是壓縮工具的活兒~ by 前端編碼規範之CSS - Barret Lee

• 多個選擇器具備相同的樣式聲明時，每一個選擇器應該單獨佔一行，便於閱讀和維護。

/* 不推薦 */
h1, h2, h3 {
    font-weight: bold;
    line-height: 1.5;
}

/* 推薦 */
h1,
h2,
h3 {
    font-weight: bold;
    line-height: 1.5;
}

• 在CSS樣式文件中添加註釋主要有兩種類型：文件頭部的文件信息註釋和正文中的解釋說明性註釋。文件信息 通常包括文件版本、版權信息以及做者等；解釋性說明的註釋 有給模塊的註釋和單獨給選擇器的註釋，模塊的註釋則須要添加註釋代表模塊樣式定義的開始和結束，CSS選擇器的註釋須要添加在選擇器的上一行，而不是和選擇器相同一行。註釋能夠在壓縮的時候選擇性去掉。

/* 註釋規範說明：文件頭部的文件信息註釋 */
/*!
 * page content v1.0
 *
 * Copyright 2015
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Designed and built by dopppler
 * /

/* 註釋規範說明：模塊樣式定義的開始和結束 */
/* page container start */
.page-content {
    ...
}
.page-content-title {
    ...
}
...
/* page container end */

在 /* 後面加一個感嘆號，表示這是"重要註釋"。即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。by SASS用法指南 - 阮一峯的網絡日誌

2.結構組織

規範的 CSS 代碼首先應該具備結構清晰和模塊分明的特色。想象一下，若是在平時的開發中，拿到效果圖就切，切完寫，沒有先從頁面總體來規劃樣式，那麼在開發的過程當中就會出現某些代碼塊難以重用的狀況，這樣就只能從原來的代碼中複製部份內容組合成新的樣式定義。隨着站點功能愈來愈多，CSS 代碼中重複的代碼就會愈來愈多，最終一發不可收拾。那麼，該如何作才能組織CSS代碼呢？

首先，組織CSS代碼文件。全部的CSS均可以分爲兩大類：通用類和業務類。代碼的組織應該把通用類和業務類的代碼放置於不一樣的目錄中。

css
 |-[業務類文件夾]
 |-[通用類-樣式重置].css
 |-[通用類-公用組件].css
 |-[通用類-ie兼容].css

• [通用類-樣式重置].css 的做用是重置元素的默認樣式，目的時讓元素在各瀏覽器中有統一的外觀。CSS Reset 簡單的一句所有重置太過粗暴，大部分人都已投向 Normalize.css 的懷抱，固然國內很多團隊也總結出本身的一套 reset.css，建議自行搜索瞭解。

Normalize.css - A collection of HTML element and attribute style-normalizations.

• [通用類-公用組件].css 的做用是放置公用模塊的樣式和一些基礎樣式。公用模塊包括頁面對話框、提示框等公用組件的樣式以及頁面頭部、底部、側邊欄等 UI 公用模塊的樣式。基礎樣式包括全局的頁面佈局設置、字體設置、背景和前景色等，也包括一些公有的class，這些公有class使用頻繁，因此須要單獨定義和使用，以提升代碼的複用度。

強烈推薦使用 Less 和 Sass 等動態樣式語言和預處理工具，方便寫出高複用和高擴展性的 CSS 代碼。

• [通用類-ie兼容].css 的做用是放置兼容舊版 IE 瀏覽器的樣式。若是把兼容舊版IE的CSS代碼和正常的代碼放置在一塊兒，這種作法有兩個缺點，一是增長了非IE瀏覽器的加載樣式文件的負擔，二時若是將來決定再也不支持舊版的IE瀏覽器，則須要修改多個文件，從而增長了維護的複雜度。

• 其他的CSS樣式文件 則用於具體業務模塊。不一樣模塊的樣式文件放置於不一樣的文件夾中。分隔模塊的粒度並無一個標準，原則上儘可能保證每一個模塊對應的樣式文件行數不超過200行，若是某個模塊的樣式文件太大，則會繼續劃分爲更小的模塊。

不要擔憂CSS樣式文件過多，把關注點放在文件的管理上便可，由於到最後能夠用自動構建工具把多個樣式文件進行合併壓縮處理。

3.元素單位

em、px 仍是 % ？亦或是 rem ？頁面元素的尺寸（長度、寬度、內外邊距等）以及頁面字體的大小時和頁面總體佈局息息相關的，而頁面佈局的方式又是多種多樣的。所以，若是沒有合理地設置頁面元素尺寸以及字體的大小，就會增長頁面佈局的複雜性，也會使得頁面佈局維護變得困難，還會使頁面的擴展性和使用平臺受到限制。那麼該如何設置元素的尺寸和字體大小，從而達到最佳的可維護性呢？可參考如下三個建議：

1. 儘可能設置相對尺寸。頁面應該是自適應呢，仍是固定尺寸呢？這個取決於頁面的設計。這裏關注的是局部元素的尺寸要求使用相對大小，即局部自適應。這樣當總體模塊的尺寸更改時就不須要更改模塊內部子模塊的尺寸了。

2. 只有在可預知元素尺寸的狀況下使用絕對尺寸。編寫的代碼必定要先遵循設計要求，在某些場合可能必須使用絕對尺寸，例如網頁總體的寬度固定、側邊欄寬度固定、頁頭和頁尾的高度固定等。

3. 使用 rem 設置字體大小。rem是個低調的單位，但在近一兩年中開始火了起來。國內各大公司都已經投入使用，在一些常見的網站，如淘寶、騰訊、小米等移動站點，隨處可見其蹤跡。詳細用法可參見如下三篇文章或自行搜索瞭解。

web app變革之rem - 騰訊ISXUX
手機淘寶的flexible設計與實現 - 前端亂燉
MobileWeb 適配總結 - Lok'tar Ogar

4.樣式重置

上文已說起，這裏推薦閱讀 @alsiso 同窗寫的 CSS Reset 專題文章。

關於CSS Reset那些事（一）- SegmentFault
關於CSS Reset那些事（二）- SegmentFault
關於CSS Reset那些事（三）- SegmentFault
關於CSS Reset那些事（四）- SegmentFault

5.樣式排序

爲何要給樣式排序？由於，若是CSS屬性按照必定的規則排序，那麼在開發過程當中能夠防止屬性的重複定義，代碼的檢查者也能很清晰地查看CSS樣式定義，更關鍵的是在後續維護過程當中能快速定義特定的樣式屬性。儘管對CSS樣式屬性進行排序須要花費一些精力，但從代碼的可讀性和可維護性角度來考慮，這些付出將會是值得的。更況且，咱們能夠藉助一些工具來完成。: )

一種較爲合理的排序方式是 按類型分組排序。著名的 Web 前端專家 Andy Ford 推薦過一種按照類型分組排序的方式，他把CSS屬性分爲7大類：

• 顯示與浮動（Display & Flow）

• 定位（Positioning）

• 尺寸（Dimensions）

• 邊框相關屬性（Margins、Padding、Borders、Outline）

• 字體樣式（Typographic Styles）

• 背景（Backgrounds）

• 其餘樣式（Opacity、Cursors、Generated Content）

這種按照樣式類型分組排列的方式不只把功能類似的屬性歸類到一塊兒，而且按照樣式功能的重要性從上到下進行了排序。能夠把影響元素頁面佈局的樣式（如 float、margin、padding、height、width等）排到前面，而把不影響佈局的樣式（如background、color、font等）放到後面。這種主次分明的排列方式，極大地提升了代碼的可維護性。

整理推薦的CSS屬性書寫順序 - CSDN
推薦你們使用的CSS書寫順序、規範 - 設計達人

固然，若是在編寫代碼的時候直接按照這種方式寫確定有難度，並且不方便頻繁地修改。最佳方式是編寫代碼的時候按照本身最有效率的方式來寫，編寫完成並提交的時候使用工具對其進行排序。推薦工具：CSScomb，一款免費高效並提供在線和主流代碼編輯器插件的CSS排序工具。

CSScomb - Makes your code beautiful.

6.權重製衡

什麼是權重？若是前端工程師沒有深入理解這個概念，將會很難寫出高質量的CSS代碼。在討論權重以前，咱們先來討論一下一些基礎知識。

CSS樣式有 6 種基礎選擇器：

• ID 選擇器（如 #page_content{}）

• 類選擇器(如 .page-content-title{})

• 屬性選擇器（如 a[href="http://www.google.com"]{}）

• 僞類和僞對象選擇器（如 :hover{}、::after{}）

• 標籤類型（如 div{}）

• 通配符選擇器（如 body *{}）

全部在CSS樣式中定義的選擇符都是由這 6 種基礎選擇器組合而成的，組合的方式分爲三種：

• 後代選擇符（如 .page .title{}）

• 子選擇符（如 .page>.title{}）

• 相鄰選擇符（如 .page+.title{}）

CSS權重指的是這些選擇器的優先級，優先級高的CSS樣式會覆蓋優先級的樣式。優先級越高說明權重越高。根據 W3C 制定的CSS規範，CSS權重是經過以下規則計算的：

1. 計算選擇符中的ID選擇器的數量（=a）

2. 計算選擇符中的類選擇器、屬性選擇器以及僞類選擇器的數量（=b）

3. 計算標籤類型選擇器的僞對象選擇器的數量（=c）

4. 忽略全局選擇器

按照規則，基礎選擇器具備這樣的優先級：
ID > 類 | 僞類 | 屬性選擇器 > 標籤類型 | 僞對象 > 通配符

分別計算 a、b、c 的值後，按順序鏈接 a、b、c 三個數字組成一個新數值，此數值即爲所計算的選擇符的權重。另外，若是兩個選擇符的權重相同，則依照「就近原則」，最後定義的被採用。

你應該知道的一些事情——CSS權重 - W3CPlus

明白權重的計算規則後，咱們能夠制定一些相關原則來提升樣式代碼的重用性和可維護性。

1. CSS樣式中儘可能不要使用ID選擇器。一個頁面中不容許有兩個相同的ID，若是使用了ID選擇器就意味着此此樣式只能做用於一個元素，不能複用於其餘元素。

2. 減小子選擇器的層級。下降選擇符總體的權重，減小對HTML結構的依賴。

3. 使用組合的CSS類選擇器。面向對象編程一條原則：「多組合，少繼承」。

7.兼容分離

上文已說起。

那些爲了兼容舊版瀏覽器而添加的額外代碼，被成爲 hack 代碼。大部分前端程序員都不肯意寫 hack 代碼，由於 hack 代碼不易理解且維護困難。

如下是兼容 IE 瀏覽器的一些實踐：

• 熟悉 IE 瀏覽器中常見的樣式兼容問題。IE 瀏覽器下的兼容問題通常分爲兩類，一類時瀏覽器自己的Bug，另外一類是標準不兼容，或者不支持標準（這類問題居多）。

Browserhacks - ie

• 分離樣式兼容代碼。爲了當將來某個時期不在支持某個舊版本的瀏覽器時，方便移除這些兼容代碼。

在 IE 瀏覽器中可使用條件註釋，讓不一樣瀏覽器加載不一樣的樣式文件以達到兼容代碼和正常代碼分離的目的。

<link rel="stylesheet" media="screen" href="css/style.css" />
<!--[if IE 8]><link rel="stylesheet" media="screen" href="css/ie8.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" media="screen" href="css/ie7.css"><![endif]-->

另外，爲了提升兼容樣式的優先級，能夠在根元素（<html>或者<body>元素）上針對不一樣的瀏覽器添加不一樣的樣式類。

<!--[if IE 7]>       <html class="ie7"><![endif]-->
<!--[if IE 8]>       <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html>        <--<![endif]-->

參考

• 《Web前端開發最佳實踐》黨建

以上，歡迎拍磚斧正。