CSS開發要注意哪些事項

這篇“CSS開發要注意哪些事項”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS開發要注意哪些事項”文章吧。

1.不要濫用類

在有意義的地方使用ID而不要使用類。這是一個使得瀏覽器能夠更快訪問DOM元素的方法。

2.不要把一切都扔進一個CSS文件中

分區CSS使其更易于管理。每一個CSS文件都可以分解成例如header.css、footer.css等邏輯組件。

3.不要命名選擇器為“.red-with-green-dashed-lines”(紅綠虛線)

根據頁面上的組件命名你的選擇器。

4.不要忘記注釋

注釋在CSS中非常重要，可用來理解每個樣式如何與其他樣式關聯以及什么顏色方案適用于哪些組件。

5.不要害怕開發工具

現在的每個瀏覽器都有自己的一套開發工具，通常是按F12。這些工具在“調試CSS”時至關重要。

6.不要害怕覆蓋

當然，CSS框架，例如Bootstrap和Foundation都較為巨大，但每一個都需要根據你的需要做出一點調整。當你得到一個更新的框架時，它將覆蓋你的改變。與其深入挖掘龐大的CSS文件，還不如創建一個bootstrap-overrides.css文件，按照你的意愿調整框架，只是…

7.不要濫用 !很重要

CSS的整體思路是，從一個到另一個地“層疊”樣式。 !重點是要記住排雷一樣地踏遍所有早先的樣式。

8.不要使用大量網絡字體

這也是顯而易見的，但有些人就是喜歡自己排版。只在網站上使用一個或兩個(最多三個)網絡字體，然后回歸到瀏覽器默認設置，以保持網站的優化。

9.不要手動編碼所有的CSS

為了保持CSS的DRY，可以使用CSS預處理程序例如LESS或SASS。使用這些預處理器的最大好處是，你可以定義變量。

10.不要讓CSS過于“臃腫”

空格會占用CSS文件的空間空間。由于我們都希望我們的CSS能夠快速加載，因此在部署到網站之前最好使用CSS壓縮工具來一次瘦身。

11、不要使用過小的圖片做背景平鋪

這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200*200=40, 000 次，占用資源。

12、無邊框

推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，占用資源。

13、慎用 * 通配符

所謂通配符，就是將 CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。

14、CSS 的十六進制顏色代碼縮寫

習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。

15、樣式放頭上，腳本放腳下。不內嵌，只外鏈。

16、堅決不用 CSS 表達式。

17、使用 引用樣式表，而不是通過 @import 導入。

18、一般來說，PNG 比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。

19、千萬不要在 HTML 中縮放圖片，一者不好看，二者占資源。

20、正文字體最好用偶數，12px、14px、16px，效果非常好。特例，15px。

21、block、ul、ol 等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。

22、段落之間，至少要有一倍行距。

23、強行指定某些元素的 line-height，正文 1.6 倍于文字大小，標題 1.3 倍。

24、中文標點用全角。英文夾雜在中文中，左右空格，半角。

25、中文字體的粗體和斜體，遠離較好，利民利己。

以上就是關于“CSS開發要注意哪些事項”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。