可擴充套件、模組化CSS--主題樣式規則(翻譯文)

SMACSS is becoming one of the most useful contributions to front-end discussions in years

很多專案可能並不需要主題這個樣式，因為並不是樣式的核心。然而一些網站是需要的，比如雅虎郵箱。

主題

把主題定義為網站或者APP需要看的顏色和圖也許是很自然的。所以單獨的把主題分開來進行選擇和使用是很好的。
主題會影響原始佈局，和預設樣式一樣的渲染頁面，並且它覆蓋基本顏色。改變基本顏色，改變整個感官。
現在假如說你有一個對話模組，它需要一個藍色邊框。模組本身初始會有一個邊框樣式，主題定義它的顏色。

.mod {
    border: 1px solid;
}

// in theme.css
.mod {
    border-color: blue;
}

主題可以有類名，它清晰的指出，元素應該是怎麼樣的。只要我們把主題分離的夠好就會更多樣。像雅虎郵箱就有超過50種主題檔案來綜合各種想要的顏色和圖片。

排印

最後但不是最重要的，有一個字型樣式，類似於主題。有些時候你需要大範圍的重新定義正在使用的字型並且國際化等。中國和韓國等地區複雜的表意文字,是難以閱讀小字型大小。因此,我們為每個地區建立單獨的字型檔案,重新定義這些元件的字型大小。字型規則通常會影響基礎模組和風格。字型樣式通常不會被指定在佈局層次佈局用於定位和佈局,風格變化不像字型和顏色。像主題檔案,可能沒有實際需要定義字型類(如f-large)。你的網站應該只有3到6不同的字型。如果你有超過6字型大小宣佈在您的專案中,您的使用者可能不會注意到你的網站，也更難維護。

原文地址：https://smacss.com/