編寫幹淨、輕量級、易於維護和管理的CSS代碼

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

相關文章:

提高網站可用性的十大實用技巧

分析導致網頁設計效果大大降低的問題

如何有效提高網頁設計師的工作價值

輕松創建個性ASCII代碼有趣的角色動畫

網站建設常識:網站欄目策劃的重要性

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.