為什么我們的CSS代碼會變得一團糟？一些網頁設計師會陷入這種困惑。有時這是從一開始就編程草率的結果，有時是由於後來多次額外的修改和修改。實際上，編寫幹淨，輕量且易於維護和管理的CSS代碼並不困難。我希望以下CSS代碼編寫技巧可以幫助您提高自己的能力。
1.保持條理性
像其他任何事情一樣，這是值得你自己組織。使用一個清晰的結構，而不是按你喜歡的方式組織ID和類（不要寫任何你想要的東西）。
這將幫助您記住CSS在您頭腦中的級聯性質，並允許樣式表利用樣式繼承。
2.頭銜、日期和簽名
讓其他人知道是誰寫了你的CSS，寫的時候，以及在有問題時聯系誰。這在設計模板或主題時非常有用。
3.使用模板庫
一旦選擇了一個結構，去掉所有非通用文件，並將它們保存為CSS模板以備將來使用。
您可以將多個版本保存為多種用途：兩欄布局、博客布局、打印、移動等……coda（osx編輯器）有一個很好的剪輯功能，使您可以輕松地做到這一點。許多其他編輯器也有類似的功能，但是即使是簡單的一批文本文件也能很好的工作。
4 良好的命名習慣
您會注意到我已經聲明了上面兩列的ID。我稱他們為col-alpha和col-beta。為什么不叫col-left和col-right？請始終考慮未來的編輯。
明年你可能需要重新設計你的網站，並將左欄移到右欄。您不應該僅僅為了調整位置而重命名HTML中的元素和樣式表中的ID。
當然，您可以將左邊的列移到右邊，並將col的id保持在左邊，但這有多混亂？如果ID被保留，人們應該期望它一直保留。這樣你就沒有足夠的活動空間了。
CSS的主要優點之一是能夠分離樣式和內容。您可以重新設計網站而無需觸及HTML並只修改CSS，因此不要使用限制性名稱來汙染CSS。使用更一般的命名約定並保持一致。
讓單詞的具體位置或風格根據您的風格和ID而定。a.鏈接藍色也會使您的通話更昂貴，或者當客戶要求您將藍色鏈接改為橙色時，會使您的風格變得非常糟糕。
根據元素的名稱命名元素，而不是它們的外觀。例如，.comment-blue和.comment-beta不如.post-largefont比.post-title更受限制。
5.用連字符替換下劃線
舊瀏覽器可能不太支持CSS中的下劃線，或者根本不支持下劃線。為了更好地向後兼容，養成使用連字符的習慣。使用col-alpha而不是col-alpha。
6.具有組合元素的重用樣式
而不是使用複合元素重新聲明樣式，盡可能重用樣式。如果您的h1和h2都使用相同的字體大小，顏色和邊距，請將它們與逗號組合使用。
第七章。優化為輕量級樣式表
按照以上提示，您可以真正減少樣式表的大小。體積越小，負載越快，維護和更新就越容易。
網頁設計出色，會直接幫助你的網站或品牌發展，絢爛的色彩也使是你們接受
刪除不需要的那些，並盡可能將它們與組合合並。小心打包的css框架，你可能會繼承很多你不會使用的東西。
CSS減肥的另一個快速技巧是不需要為0指定單位。如果邊距設置為0，則不需要編寫0px或0em。0為0，不考慮度量單位，css可以理解。
8.為壁虎編寫基本樣式，然後根據webkit和
從故障排除的麻煩中解脫出來，首先為Gecko瀏覽器（Firefox，Mozilla，Netscape，Flock，Camino）編寫css。如果您的CSS在Gecko中工作正常，那么它在Webkit（Safari，Chrome）和IE中也可能會很好。
9. 驗證
請使用W3C的免費CSS驗證。如果您遇到問題，並且您的布局不能按您的需要工作，那么CSS驗證器可以非常有助於指出錯誤。
10.保持代碼清潔
為特定瀏覽器編寫的CSS放在單獨的樣式表中，使用Javascript /服務器端代碼或條件注釋按需加載。使用此方法可以避免主樣式表中的髒CSS黑客攻擊。這將使基本CSS保持幹淨且易於管理。
相關文章：