在網(wǎng)頁(yè)開(kāi)發(fā)中，CSS選擇器的命名規(guī)范是非常重要的。命名規(guī)范的好壞直接關(guān)系到代碼的可讀性和可維護(hù)性。下面就為大家介紹一下30個(gè)CSS命名規(guī)范。

1. 使用小寫(xiě)字母和連字符，避免使用駝峰命名法
2. 使用有意義的類名
3. 避免使用縮寫(xiě)，如使用 margin 而不是 m
4. 確定命名的層級(jí)關(guān)系，如 .header .logo 和 .header .nav
5. 避免使用無(wú)意義的命名，如 .box、.content
6. 不要使用數(shù)字作為類名的開(kāi)頭
7. 使用一致的命名規(guī)范
8. 避免使用諸如“new”“l(fā)atest”之類的詞
9. 使用語(yǔ)義化的命名，如 .heading、.article 和 .footer
10. 避免使用HTML元素類型作為類名前綴，如 .div-header
11. 使用BEM命名規(guī)范，如 .block__element--modifier
12. 避免使用純數(shù)字作為類名，如 .2col
13. 使用前綴以區(qū)分屬于不同模塊的類，如 .nav-、.btn-
14. 使用少量類名
15. 使用“is-”或“has-”前綴表示狀態(tài)，如 .is-active、.has-error
16. 避免使用歧義的類名
17. 使用名詞而不是動(dòng)詞或形容詞
18. 避免使用單詞復(fù)數(shù)形式
19. 遵循某個(gè)命名約定，如 SMACSS、OOCSS、Bootstrap
20. 將大寫(xiě)字母用于組件邊界，如 .ComponentName
21. 使用可讀的類名，而不是簡(jiǎn)寫(xiě)
22. 避免使用層次太深的選擇器
23. 使用橫線而不是下劃線來(lái)分隔單詞
24. 避免使用符號(hào)和特殊字符
25. 分別使用class和id來(lái)定義樣式和javascript事件
26. 避免使用與CSS關(guān)鍵字和屬性相同的類名
27. 使用有意義的變量名，如 $primary-color
28. 避免給一組元素指定類名，如 .item1、.item2、.item3
29. 不要使用冗長(zhǎng)的類名
30. 不要使用太簡(jiǎn)單的類名，容易與其他類名沖突