CSS的命名规范有哪些
CSS的命名规范有哪些
这篇文章主要讲解了“CSS的命名规范有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS的命名规范有哪些”吧！
命名规范
我们说过，我们最终的目的是协同开发，所以就要让我们的代码让别人看得懂。所以在css命名上需要有一定的规范，不同公司都有不同的规范，但这些规范大多都有相同的特点：
-
类名不使用魔法类名，也就是说，你的类名不能随便起，应当具有一定意义（比如a，b这种类名就是不负责任的一种起名方式）。
-
如果可以，请不要使用拼音作为命名，因为阅读代码的人不一定会懂拼音，这不利于维护
-
如果可以，类名尽量简写（前提是能让人看得懂，也就是说在2的基础上简写。
-
类名的命名时如果涉及多个单词组成的长名称或者词组，需要进行连字符进行连接，请使用中划线（-），因为下划线是js中经常使用到的，使用中划线避免冲突。
-
不要随便使用id选择器（不然会出现命名荒），id选择器在页面中是唯一的，不可复用，而且id的优先级比较高，所以在调试上会比较麻烦。所以尽量按需使用。
-
为选择器添加状态前缀（或者直接以一个状态命名一个选择器）这样可以更有语义化，比如某个标签被选中激活了，可以使用active作为一个激活情况的css来应用。
-
css对大小写不敏感（不是绝对的，如果与HTML文档一起工作，class和id就对大小写敏感，所以，请统一使用小写），但并不意味着你可以随便采用大小写混合，最好的方式是统一用大写或者小写，就个人经验而言，小写字母更易阅读。
书写顺序
-
css是有顺序的，后面写的样式在优先级相同的情况下会覆盖掉前面的样式，所以请注意你的书写顺序！
-
我们一般写css的时候要按照一定的顺序有规律的写css代码，这样会提高代码的可阅读性。一种经典的css属性书写顺序是这样的：
-
位置属性(position, top, right, z-index, display, float等)
-
大小(width, height, padding, margin)
-
文字系列(font, line-height, letter-spacing, color- text-align等)
-
背景(background, border等)
-
其他(animation, transition等)
-
另外，在一些简写中也要求属性按一定顺序排列，比如当简写background属性时，属性值的顺序为:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
其他代码优化
-
在可以使用简写的情况下请尽量使用简写，这样能精简代码便于阅读。
-
如果有小数点前是0的话，可以去掉小数点。（但是小编还是以为留着小数点会更有阅读性）。
-
如果使用16进制颜色代码，可以缩写的话尽量缩写。（但是大多数情况不一定能缩写，所以不缩写也不会有太大的阅读问题）。
-
注释很重要，要明白你写的代码最后不只是你要看的，好的注释可以让你的同事更好理解你的代码，也能避免同事间的冲突（试想一下，你看到的写的想屎一样的代码来自你的一个不是很待见的同事，你会给他好脸色吗？）。
-
不要使用
！important，它是样式优先级最高的意思，如果使用他会让本来就不好调试的css代码更加混乱，这个命令通常是在调试的时候使用的，尽量不要写进生产代码。
如果对你的代码是否符合规范还有疑惑，一些开发工具提供代码检查功能（没错我说的就是jetbrain公司的产品，他们家的webstorm，PHPstorm，还有可以兼职编写前端页面的idea，pycharm等都有代码检查功能，可以检查css是否符合规范）。
感谢各位的阅读，以上就是“CSS的命名规范有哪些”的内容了，经过本文的学习后，相信大家对CSS的命名规范有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[