温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS的命名规范有哪些

发布时间:2022-02-23 17:16:32 来源:亿速云 阅读:193 作者:iii 栏目:开发技术

这篇文章主要讲解了“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的命名规范有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI