層疊樣式表/疑難解答順序

使用重置塊作為樣式元素選擇器（沒有類或 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 名稱來命名標準佈局元件，例如 banner、logo、badge、screenshot、thumbnail、breadcrumbs、navigation、sidebars、marquee、subnav、content、gutter、headmargin、footmargin、sidemargin、baseline、overlay、fold、ads、widgets 和音訊/影片播放器。例如，

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

使用語義類名稱來命名可能需要特定樣式的標準散文元件，例如 sentence、phrase、clause、salutation、lead-in、suffix、prefix、anagram、homonym、contraction、gerund、idiom、interjection、onomatopoeia、timespan 等。

使用語義類名稱來命名可能需要特定樣式的標準文章元件，例如 headshot、caption、mugshot、masthead、folio、subhead、dateline、byline、topic、bio、ticker、alert、boilerplate、dropcap、slogan、keyword、tease、sample、snippet、sidebar、boxscore、ranking、standing、poll、addendum、soundbite、pullquote、plugs、followup、letterhead 等。

使用語義類名稱來命名可能需要特定樣式的論文元件，例如 objective、excerpt、aside、citation、footnote、topic、annotation、summary、table of contents 等。例如，

<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>