CSS的命名规范有哪些

这篇文章主要讲解了“CSS的命名规范有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS的命名规范有哪些”吧！

命名规范

我们说过，我们最终的目的是协同开发，所以就要让我们的代码让别人看得懂。所以在css命名上需要有一定的规范，不同公司都有不同的规范，但这些规范大多都有相同的特点：

1. 类名不使用魔法类名，也就是说，你的类名不能随便起，应当具有一定意义（比如a，b这种类名就是不负责任的一种起名方式）。

2. 如果可以，请不要使用拼音作为命名，因为阅读代码的人不一定会懂拼音，这不利于维护

3. 如果可以，类名尽量简写（前提是能让人看得懂，也就是说在2的基础上简写。

4. 类名的命名时如果涉及多个单词组成的长名称或者词组，需要进行连字符进行连接，请使用中划线（-），因为下划线是js中经常使用到的，使用中划线避免冲突。

5. 不要随便使用id选择器（不然会出现命名荒），id选择器在页面中是唯一的，不可复用，而且id的优先级比较高，所以在调试上会比较麻烦。所以尽量按需使用。

6. 为选择器添加状态前缀（或者直接以一个状态命名一个选择器）这样可以更有语义化，比如某个标签被选中激活了，可以使用active作为一个激活情况的css来应用。

7. css对大小写不敏感（不是绝对的，如果与HTML文档一起工作，class和id就对大小写敏感，所以，请统一使用小写），但并不意味着你可以随便采用大小写混合，最好的方式是统一用大写或者小写，就个人经验而言，小写字母更易阅读。

书写顺序

• css是有顺序的，后面写的样式在优先级相同的情况下会覆盖掉前面的样式，所以请注意你的书写顺序！

• 我们一般写css的时候要按照一定的顺序有规律的写css代码，这样会提高代码的可阅读性。一种经典的css属性书写顺序是这样的：

1. 位置属性(position, top, right, z-index, display, float等)

2. 大小(width, height, padding, margin)

3. 文字系列(font, line-height, letter-spacing, color- text-align等)

4. 背景(background, border等)

5. 其他(animation, transition等)

• 另外，在一些简写中也要求属性按一定顺序排列，比如当简写background属性时，属性值的顺序为:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

其他代码优化

• 在可以使用简写的情况下请尽量使用简写，这样能精简代码便于阅读。

• 如果有小数点前是0的话，可以去掉小数点。（但是小编还是以为留着小数点会更有阅读性）。

• 如果使用16进制颜色代码，可以缩写的话尽量缩写。（但是大多数情况不一定能缩写，所以不缩写也不会有太大的阅读问题）。

• 注释很重要，要明白你写的代码最后不只是你要看的，好的注释可以让你的同事更好理解你的代码，也能避免同事间的冲突（试想一下，你看到的写的想屎一样的代码来自你的一个不是很待见的同事，你会给他好脸色吗？）。

• 不要使用！important，它是样式优先级最高的意思，如果使用他会让本来就不好调试的css代码更加混乱，这个命令通常是在调试的时候使用的，尽量不要写进生产代码。

如果对你的代码是否符合规范还有疑惑，一些开发工具提供代码检查功能（没错我说的就是jetbrain公司的产品，他们家的webstorm，PHPstorm，还有可以兼职编写前端页面的idea，pycharm等都有代码检查功能，可以检查css是否符合规范）。

感谢各位的阅读，以上就是“CSS的命名规范有哪些”的内容了，经过本文的学习后，相信大家对CSS的命名规范有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！