網頁書寫乾淨輕巧易於維護管理的CSS代碼

為什麼我們的CSS代碼會變得一團糟？部分網頁設計師會陷入這樣的困惑中。有時這是一開始就馬虎編程的結果，有時是由於後期多重的附加代碼(hacks)和修改造成的。

其實，寫出乾淨、輕巧、易於維護管理的CSS代碼並不很難，希望下面這些CSS代碼編寫技巧能幫助大家提高這方面的能力。

　　1.保持條理性

像任何事情一樣，讓自己保持條理性(有組織)是值得的。網頁設計採用清晰的結構，而不是隨心所欲地組織id和class(別想到啥就寫啥)。

這會有助於你在心裡記住CSS的級聯性，並讓你的樣式表能夠利用樣式繼承。

首先聲明最通用的item(id class或者是html element)，接下來是稍微不那麼通用的……依此類推。這讓你的CSS能適當地繼承屬性，當需要的時候，重寫一條特殊的樣式會更容易。將來編輯CSS時也會更快，因為它遵循著一個易於閱讀的邏輯結構。

　　2.標題、日期和簽名

讓其他人知道誰寫了你的CSS，什麼時候寫的，網頁設計以及如果有問題可以聯繫誰。在設計模板或主題時這非常的有用。

稍等片刻…那些色標數字是咋回事？多年以來，我發現，簡單列舉出我的樣式表裡常用的顏色，在初次開發和後期編輯時真的非常有幫助。

這節約了你打開Photoshop從設計圖裡吸一個顏色，或者在這個網站的風格指南(如果這個東東存在)裡查顏色。如果你需要那個特定的藍色的HTML代碼，只需要翻到註釋處複製它就行了。

　　3.使用模板庫

一旦你選定了用一個結構，剝掉所有不通用的並把文件存成一個CSS模板，以便將來使用。

你可以為多種用途保存多個版本：兩欄佈局、博客佈局、打印、移動等等……Coda(OSX的編輯器)有一個優秀的Clips特性能讓你很簡單的做到這些。很多其他的編輯器也有類似的特性，不過甚至是一批簡單的文本文件也能很好地工作。

每次都從頭開始重寫每一個樣式表是很瘋狂的，特別是每個都是採用一樣的約定和方法。

　　4 良好的命名習慣

你會注意到上面我聲明了兩個列的id，我管他們叫col-alpha和col-beta，為什麼不叫col-left和col-right？請總是考慮到將來的編輯。

下一年你可能需要重新設計你的站點，網頁設計把左邊的列移到右邊，你不該就為了調整位置而在HTML中重命名這個元素並在樣式表中重命名id。

當然，你可以就把左邊的列移動到右邊並且保留#col-left的id，網頁設計但是那多讓人困惑？如果id是“左”，人們應該會希望它將一直在左邊。之後這沒為你留下太多空間去移動周圍的東西。

CSS的一個主要優點就是分離樣式和內容的能力。台中網頁設計你可以完全不用碰HTML，只修改CSS，就能重設計站點，所以不要用限制性的名字弄髒了CSS。用更通用的命名習慣，並保持一致。

讓具體的位置或者樣式的詞語原理你的樣式和id，一個.link-blue同樣會讓你話費更的工作，網頁設計公司或者在客戶要求你把那些藍色的鏈接修改成橙色的時候讓你的樣式變得真的很糟糕。

按照他們是什麼，而不是他們看起來的樣子為元素命名。例如，.comment-blue和.comment-beta比起來就不太通用了，.post-largefont比.post-title更局限一些。