css**難維護眾所皆知。
css樣式定義上的靈活性帶來的是css**的多樣性，如果毫無章節地使用這些定義樣式的方式，勢必會導致css**的混亂和難以維護。本文將拋磚引玉，總結出幾個方面來討論如何編寫可維護性的css**。
web前端開發入門難度並不高，但是初學者如果沒有乙個很好地學習和編碼習慣，則開發水平的提高速度會變得很慢。 by 《web前端開發最佳實踐》黨建
不管有多少人共同參與同一專案，一定要確保每一行**都像是同乙個人編寫的。by 編碼規範 @mdo命名規範和格式規範是**規範中最基本的規範，任何**的混亂都是從命令和格式的混亂開始，而意義明確的命名和規整的**格式則提高了**的可讀性與可維護性，給閱讀者和維護者留下來良好的第一印象。每個開發團隊都應該有一套自己的規範。
.page-content-title/* 父元素的樣式宣告 */
.page-content
/* 子元素的樣式宣告 */
.page-content-body
/* 不推薦 */
.page-content-title
/* 不推薦 */
.page-content-title
/* 推薦 */
.page-content-title
單行顯示不好注釋，不好備註，這應該是壓縮工具的活兒~ by 前端編碼規範之css - barret lee
/* 不推薦 */
h1, h2, h3
/* 推薦 */
h1,h2,
h3
/* 注釋規範說明：檔案頭部的檔案資訊注釋 */
/*! * page content v1.0
* * 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用法指南 - 阮一峰的網路日誌
規範的 css **首先應該具有結構清晰和模組分明的特點。想象一下，如果在平時的開發中，拿到效果圖就切，切完寫，沒有先從頁面整體來規劃樣式，那麼在開發的過程中就會出現某些**塊難以重用的情況，這樣就只能從原來的**中複製部分內容組合成新的樣式定義。隨著站點功能越來越多，css **中重複的**就會越來越多，最終一發不可收拾。那麼，該如何做才能組織css**呢？
首先，組織css**檔案。所有的css都可以分為兩大類：通用類和業務類。**的組織應該把通用類和業務類的**放置於不同的目錄中。
css
|-[業務類資料夾]
|-[通用類-樣式重置].css
|-[通用類-公用元件].css
|-[通用類-ie相容].css
normalize.css - a collection of html element and attribute style-normalizations.
強烈推薦使用less和sass等動態樣式語言和預處理工具，方便寫出高復用和高擴充套件性的 css **。
不要擔心css樣式檔案過多，把關注點放在檔案的管理上即可，因為到最後可以用自動構建工具把多個樣式檔案進行合併壓縮處理。
em、px還是%？亦或是rem？頁面元素的尺寸（長度、寬度、內外邊距等）以及頁面字型的大小時和頁面整體布局息息相關的，而頁面布局的方式又是多種多樣的。因此，如果沒有合理地設定頁面元素尺寸以及字型的大小，就會增加頁面布局的複雜性，也會使得頁面布局維護變得困難，還會使頁面的擴充套件性和使用平台受到限制。那麼該如何設定元素的尺寸和字型大小，從而達到最佳的可維護性呢？可參考以下三個建議：
盡量設定相對尺寸。頁面應該是自適應呢，還是固定尺寸呢？這個取決於頁面的設計。這裡關注的是區域性元素的尺寸要求使用相對大小，即區域性自適應。這樣當整體模組的尺寸更改時就不需要更改模組內部子模組的尺寸了。
只有在可預知元素尺寸的情況下使用絕對尺寸。編寫的**一定要先遵循設計要求，在某些場合可能必須使用絕對尺寸，例如網頁整體的寬度固定、側邊欄寬度固定、頁頭和頁尾的高度固定等。
手機**的flexible設計與實現 - 前端亂燉
mobileweb 適配總結 - lok'tar ogar
關於css reset那些事（一）- segmentfault為什麼要給樣式排序？因為，如果css屬性按照一定的規則排序，那麼在開發過程中可以防止屬性的重複定義，**的檢查者也能很清晰地檢視css樣式定義，更關鍵的是在後續維護過程中能快速定義特定的樣式屬性。儘管對css樣式屬性進行排序需要花費一些精力，但從**的可讀性和可維護性角度來考慮，這些付出將會是值得的。更何況，我們可以借助一些工具來完成。: )關於css reset那些事（二）- segmentfault
關於css reset那些事（三）- segmentfault
關於css reset那些事（四）- segmentfault
這種按照樣式型別分組排列的方式不僅把功能相似的屬性歸類到一起，並且按照樣式功能的重要性從上到下進行了排序。可以把影響元素頁面布局的樣式（如float、margin、padding、height、width等）排到前面，而把不影響布局的樣式（如background、color、font等）放到後面。這種主次分明的排列方式，極大地提高了**的可維護性。
整理推薦的css屬性書寫順序 - csdn推薦大家使用的css書寫順序、規範 - 設計達人
csscomb - makes your code beautiful.什麼是權重？如果前端工程師沒有深刻理解這個概念，將會很難寫出高質量的css**。在討論權重之前，我們先來討論一下一些基礎知識。
css樣式有 6 種基礎選擇器：
所有在css樣式中定義的選擇符都是由這 6 種基礎選擇器組合而成的，組合的方式分為三種：
css權重指的是這些選擇器的優先順序，優先順序高的css樣式會覆蓋優先順序的樣式。優先順序越高說明權重越高。根據 w3c 制定的css規範，css權重是通過如下規則計算的：
計算選擇符中的id選擇器的數量（=a）
計算選擇符中的類選擇器、屬性選擇器以及偽類選擇器的數量（=b）
計算標籤型別選擇器的偽物件選擇器的數量（=c）
忽略全域性選擇器
按照規則，基礎選擇器具有這樣的優先順序：
id > 類 | 偽類 | 屬性選擇器 > 標籤型別 | 偽物件 > 萬用字元
分別計算 a、b、c 的值後，按順序連線 a、b、c 三個數字組成乙個新數值，此數值即為所計算的選擇符的權重。另外，如果兩個選擇符的權重相同，則依照「就近原則」，最後定義的被採用。
你應該知道的一些事情——css權重 - w3cplus明白權重的計算規則後，我們可以制定一些相關原則來提高樣式**的重用性和可維護性。
css樣式中盡量不要使用id選擇器。乙個頁面中不允許有兩個相同的id，如果使用了id選擇器就意味著此此樣式只能作用於乙個元素，不能復用於其他元素。
減少子選擇器的層級。降低選擇符整體的權重，減少對html結構的依賴。
使用組合的css類選擇器。物件導向程式設計一條原則：「多組合，少繼承」。
上文已提及。
那些為了相容舊版瀏覽器而新增的額外**，被成為hack **。大部分前端程式設計師都不願意寫 hack **，因為 hack **不易理解且維護困難。以下是相容 ie 瀏覽器的一些實踐：
browserhacks - ie在 ie 瀏覽器中可以使用條件注釋，讓不同瀏覽器載入不同的樣式檔案以達到相容**和正常**分離的目的。
<--
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此，內聯樣式 在html 元素內部 擁有最...