為什么我們的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保持幹淨且易於管理。
相關文章: