排版
排版包括定義全局和所有常見元素的字體. 定義那些會控制內(nèi)容的元素的字體, 比如頁頭, 段落樣式, 列表, 引用等等.
把字體定義從布局樣式里面劃分出來
布局設(shè)計
既然已經(jīng)解決了定位和排版, 你現(xiàn)在就要把精力放在頁面設(shè)計上了.
如果這部分太長的話, 以后可以把它們劃分成更小的部分. 適當(dāng)縮進(jìn), 保持代碼的層次感對維護(hù)樣式表很有幫助.
其他部分
通常我會把表單, 內(nèi)容管理系統(tǒng)代碼等單獨(dú)分出來. 根據(jù)需要, 把自己項目的樣式單獨(dú)分成一部分.
一旦需要調(diào)試或者修改從前項目的時候, 模塊化代碼的優(yōu)點(diǎn)就很明顯了. 瀏覽代碼, 并找到所需的代碼就變得容易很多.
縮進(jìn)和層級
最高級別的元素縮進(jìn)最少. 它的下一級元素縮進(jìn)一次. 再下一級縮進(jìn)兩次, 以此類推.
適當(dāng)縮進(jìn)并保持父級子級的層級結(jié)構(gòu)
這樣做不僅美觀而且可讀性強(qiáng), 同時可以更容易的鎖定問題. 大量的空格的確會使文件變大, 但你總是可以在發(fā)布之前壓縮CSS文件.
比如, 頁面上的搜索框出了問題. 而代碼必須在布局部分里, 寫在父級側(cè)邊欄樣式的下面. 如果有適當(dāng)?shù)哪K化和縮進(jìn), 你會發(fā)現(xiàn)找到你需要的代碼是多么容易的事情.
對屬性加以分類, 而不是按照字母序排列
有的設(shè)計師覺得把CSS屬性按字母序排列是一個比較有效的方法, 因為這樣容易維護(hù). 但我不太同意. 我覺得用以CSS屬性的類型來排列會更有效.
.selector {
font-size: 12px;
line-height: 15px;
text-transform: uppercase;
padding: 10px;
margin: 5px;
background: #000;
border: 1px solid #222;
}
在上面的例子中, 屬性的劃分是按照: 控制內(nèi)容的, 控制間距的, 以及塊級元素的可視化(背景和邊緣)這些類型劃分的.
如果它們是按照字母序排列的, 就是下面這樣:
.selector {
background: #000;
border: 1px solid #222;
font-size: 12px;
line-height: 15px;
margin: 5px;
padding: 10px;
text-transform: uppercase;
}
很顯然, CSS的可讀性大大降低了. 我通常先寫布局相關(guān)的屬性, 接著是內(nèi)容屬性, 然后是間距和其他屬性.
總結(jié)
其實以上這些并不復(fù)雜. 這些簡單的事情可以幫助前端開發(fā)者隨時保持清晰的思路. 漂亮的樣式表是禪意開發(fā)的第一步 |
