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

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

很自然的，CSS是用來解決元素在頁面放置在哪裡的問題。大體上來說，頁面上大元件和相對較小元件的佈局是有所區別的。小元件比方說是標註(callout),登入表單元件，導航元件這些往往會歸類到頭部或者尾部佈局裡。我更喜歡把相對小的元件當成模組，較小元件將作為模組在下一章節敘述。這章主要講佈局樣式。

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

佈局樣式同樣也可以在是否複用的角度對其進行劃分為主要和較小兩個方面。主要的佈局樣式，如頁首和頁尾，傳統上是使用ID選擇器的，但是要花時間考慮頁面所有元件中常見的元素，並在適當的時候使用類選擇器。
有些網站可能需要更加通用的佈局框架，有些相對較小的佈局樣式使用類選擇器替換ID選擇器，這樣可以在多個頁面多次使用。
一般來說，佈局樣式擁有唯一ID或者類名。然而，因為不同因素，佈局樣式也要進行多變。比如說，同一佈局樣式可能在不同的使用者體驗上要做出有所不同，這個不同的表現也應該是佈局樣式的一部分。當然，同樣這些不同的佈局樣式也是要被多次複用，並且也能夠和其他的佈局樣式混合使用。

使用更高層次佈局風格影響其他佈局風格
#article {
    float: left;
}

#sidebar {
    float: right;
}

.l-flipped #article {
    float: right;
}

.l-flipped #sidebar {
    float: left;
}

在上面的佈局例子中，使l-fiipped被用到更高的層次的元素比如說body元素並且能夠使得article和sidebar內容調換，sidebar從左邊移動到右邊。

使用兩種佈局風格從流式佈局轉向固定佈局
#article {
    width: 80%;
    float: left;
}

#sidebar {
    width: 20%;
    float: right;
}

.l-fixed #article {
    width: 600px;
}

.l-fixed #sidebar {
    width: 200px;
}

而在這個例子中，l-fixed被用來進行流式和固定兩種佈局的轉換。
在佈局的例子是另一個需要注意的我用的命名約定，宣告使用ID選擇器命名準確、沒有特定的名稱空間或者說是修飾，使用字首的方式很顯然讓我們知道它是用來形容佈局的。如果你要用佈局樣式，你就用ID選擇器。如果你要在ID選擇器上進行更多的修飾，是沒有必要的。

使用ID選擇器

可以清晰的講，使用ID選擇器絕對是有好處的，在一些情況下。它可以作為Javascript的鉤子。然而，在效能表現上使用ID和類選擇器，兩種並沒有差異，反而因為特殊命名而增加複雜性。

佈局範例

理論是一回事，實際運用卻是另外一回事。讓我們看看現在的一些網站，瞭解到什麼是佈局樣式，什麼是模組樣式。

CNN主頁

CNN的網站佈局模式在其他網站中也有同樣的運用。比如，它有頁首，導航欄，內容欄和頁尾。

佈局

我們的css結構大致這樣
#header { … }
#primarynav { … }
#maincontent { … }

<div id="header"></div>
<div id="primarynav"></div>
<div id="maincontent"></div>

在這裡，可能你還是有疑惑，這個佈局太過簡單，有沒有更加詳細的說明本章主題內容的例子呢？

CNN的featured部分

在上面的截圖裡，是一個網格佈局的例子，它標記了一系列的div和子div。我更願意用list來替換它。

featured的html程式碼
<div>
<h2>Featured</h2>
<ul>
    <li><a href="…">…</a></li>
    <li><a href="…">…</a></li>
    …
</ul>
</div>

在沒有使用SMACSS的概念的情況下，你可能會這樣寫它的樣式，也就是說使用ID來加到div中，從而修飾內容。

一種可能的css的寫法
div#featured ul { 
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div#featured li {
    float: left;
    height: 100px;
    margin-left: 10px;
}

在我們使用這種方法來寫樣式時，有一些情況條件：

1.只有一個featured欄。
2.lists浮動在左邊。
3.lists有100pixs高。

這些情況條件都是很有可能的。在一些小網站裡頭都會有這樣結構：網站在一段時間裡不太會改變或者更加複雜。可能大型網站有更高的機率就重構樣式。
我們看到以上的樣式程式碼例子，有很多地方可以做到優化。沒必要使用ID選擇器來限制標籤選擇器。既然list是子元素，那麼可以使用>符號。
接下來，我們嘗試重寫這段程式碼，讓它顯得更加靈活。在佈局這個角度，我們要知道它的成員之間的關係。我們沒必要關心模組本身，也沒必要關心這個佈局的上下文是如何。

OL 或 UL的樣式
.l-grid {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.l-grid > li {
    display: inline-block;
    margin: 0 0 10px 10px; 
    
    /* IE7 hack to mimic inline-block on block elements */
    *display: inline;
    *zoom: 1;
}

那麼這樣更改程式碼後，解決了什麼問題呢？（當然不會是100%的解決）。

1.這個柵格佈局現在可以用到任何地方去創造一個浮動樣式佈局。
2.我們減少應用深度到1（可以檢視應用深度這一章節，檢視它的意思）。
3.我們減少使用特殊的選擇器。
4.高度要求被刪除，其中特殊高度的行可以增高到最大。

相反的，這樣做哪些方面是糟糕的呢？

1.使用的孩子選擇器，ie6可能沒辦法相容。
2.css的變得複雜了，而且程式碼更多一些。

在程式碼量上變得更多是很正常的。我們既然可以服用這個模組，同樣也可以減少程式碼。
增加複雜性同樣也是正常的，我們如果還在關注非常古老的瀏覽器，可能會遭到白眼。讓選擇器不那麼複雜,也可以來擴充套件此佈局,同時最小化特異性的影響。

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