CSS的书写顺序和规范

CSS的书写顺序和规范衡量程序员的能力,除了要看实现业务需求的能力,还要看平时书写代码的规范(专业性

不同的CSS书写顺序会影响浏览器的渲染性能,推荐前端工程师使用专业的书写顺序习惯!

CSS的书写顺序

  1. 布局属性:display、position、float、clear、visibility、overflow
  2. 盒子模型+背景:width、height、margin、padding、border、backgroud
  3. 文本内容属性:color、font、text-decoration、text-align、line-height
  4. 点缀属性:cursor、border-radius、text-shadow、box-shadow
  5. 其他:animation、transition等

注意点:

开发中推荐多用类+后代,但不是层级越多越好,一个选择器中的类选择器的个数推荐不要超过3个

CSS的书写规范

使用CSS缩写属性

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

  • 输入的时候少按一个shift键;
  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
  • 能良好区分JavaScript变量命名(JS变量命名是用“_”)

不要随意使用Id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

 

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

创建多线程的方式(后两种)

2021-11-29 21:11:40

知识碎片

String的常用方法

2021-11-30 17:34:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧