層疊樣式表/故障排除順序

使用重置塊作為單個位置來設定沒有類或 ID 的元素選擇器的樣式，以避免級聯問題

使用 CSS 驗證器來確保頁面上沒有因拼寫錯誤和衝突宣告而導致的錯誤

直接引用 ID 和類，不要在前面加上父標籤或類名

對類使用簡寫語法，對 ID 使用長寫語法，以避免設定不必要的預設值，並簡化透過指令碼動態更改類或透過偽類更改屬性的除錯

不要使用相同的類來設定尺寸和其他盒子模型規則（包括邊距、邊框和填充），以避免限制不同元素之間尺寸或間距規則的重複使用

使用簡單的類選擇器，例如 .new{ font:bold;}，而不是建立複雜的後代選擇器來定義單個屬性，例如 .menu .title .new{ font:bold; }，以最大限度地提高程式碼庫的可讀性和可重用性

不要使用 DOM 屬性名（length、item、namedItem、tags、urns）作為 ID 值，因為它們會導致 IE 中的 JavaScript 衝突，因為 IE 將屬性名視為保留字

不要使用屬性名值作為 ID 值，因為它們會導致 IE 中的 JavaScript 衝突。例如，使用“description”作為 ID 值可能會與 description 元標籤衝突。

建立唯一的新的類，而不是父依賴子類

將通用屬性（如顏色和字型大小）複製到新的類中，作為預防措施，以防止元素由於每個類的一個屬性而依賴於多個類，因為 HTML 中的類引用最終可能看起來像內聯樣式。這也將有助於避免繼承不必要的屬性（如填充和邊距），並隨後需要在新的類中重置這些屬性

最小化後代選擇器（例如 #parent .child）和子選擇器的使用，以避免對 DOM 樹進行長時間的查詢

定義類來設定塊級元素（.content）的樣式，而不是透過 ID（#main p）使用標籤引用，以使它們獨立於其父元素

透過在現有選擇器副本前加上與 JavaScript 函式相對應的語義類名來定義 CSS 中的狀態更改，然後在 DOM 事件觸發時將類名附加到 documentElement

避免在最後一個樣式宣告中使用分號，以避免在分號之前意外部索引鍵入右括號並生成錯誤

避免使用類名來描述它呼叫的屬性，以使樣式表不會成為名稱到功能的一對一對映，從而導致 HTML 程式碼類似於內聯樣式，每個元素都有多個類引用。

使用樣式設定表格的屬性，而不是使用表格標籤屬性，以實現跨瀏覽器的一致性

新增子類以滿足常見需求，例如突出顯示列表中的第一個或最後一個專案，隱藏和顯示評論文字，強調當前導航選擇，以及開啟和關閉星級評定顏色

使用語義 ID 名稱來命名標準佈局元件（如果每個頁面只有一個這樣的元件），例如橫幅、徽標、徽章、螢幕截圖、縮圖、麵包屑、導航、側邊欄、跑馬燈、子導航、內容、間距、頁首邊距、頁尾邊距、側邊距、基線、覆蓋層、摺疊、廣告、小部件和音訊/影片播放器，例如

<img id="background" src="background.png"/>
<p id="logo"><em>Happy Fun Ball</em></p>
<p>Normal text</p>

使用語義類名來命名可能需要特定樣式的標準散文元件，例如句子、短語、從句、稱呼、引子、字尾、字首、字謎、同音詞、縮略詞、動名詞、習語、感嘆詞、擬聲詞、時間跨度等。

使用語義類名來命名可能需要特定樣式的標準文章元件，例如頭像、標題、大頭照、標題、頁首、副標題、日期線、署名線、主題、傳記、滾動新聞、警報、通用條款、首字母下沉、口號、關鍵詞、預告、示例、片段、側邊欄、比分、排名、排名、投票、附錄、摘錄、引文、外掛、跟進、抬頭等。

使用語義類名來命名可能需要特定樣式的論文元件，例如目標、摘錄、旁註、引用、腳註、主題、註釋、摘要、目錄等。例如

<p class="aside">(a parenthetical aside)</p>
<p>Normal text</p>
<p class="aside">(another parenthetical aside)</p>

首先設定標準佈局元件的字型和顏色樣式，以避免冗餘，並在定義巢狀元素時利用級聯

在樣式表開頭重置樣式，以覆蓋不同瀏覽器之間不一致的預設值

在將測試程式碼移至生產環境時，刪除冗餘和過時的樣式

對於任何旨在在第三方 API 沙箱中執行的程式碼，使用類而不是 ID，因為 ID 可能會被剝離以避免衝突

使用以下 XSLT CSS 預處理器模板，使用瀏覽器或伺服器端指令碼在您的樣式表中新增 CSS 變數

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="text" omit-xml-declaration="yes" media-type="text/css" />
    <xsl:param name="color" select="'#fff'"/>
    <xsl:template match="*">
        h1 { color: <xsl:value-of select="$color"/>; }
    </xsl:template>
</xsl:stylesheet>