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