vlambda博客
学习文章列表

爆肝整理|前端开发规范-CSS规范





CSS规范,合理地使用ID

一般情况下ID不应该被用于样式,并且ID的权重很高,所以不使用ID解决样式的问题,而是使用class。

css选择器中避免使用标签名

从结构、表现、行为分离的原则来看,应该尽量避免css中出现HTML标签,并且在css选择器中出现标签名会存在潜在的问题。

使用直接子选择器

使用后代选择器常可能导致设计问题和性能损耗,这是个不好的做法,应总是考虑直接子选择器。

爆肝整理|前端开发规范-CSS规范

尽量使用缩写属性

对于代码效率和可读性是很有用的,比如font属性。

爆肝整理|前端开发规范-CSS规范

0后面不带单位

爆肝整理|前端开发规范-CSS规范

属性格式

· 为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。

· 属性名的冒号后使用一个空格。出于一致性的原因,

· 属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。

· 每个选择器和属性声明总是使用新的一行。

· 属性选择器或属性值用双引号(""),而不是单引号('')括起来。

属性顺序

作为最佳实践,按照分组及重要性进行排序。具体地,按照由外向内,从元素与外界的关系,是否会影响外部布局,到外边距,内边距等。

1. 布局相关(display, position, float, overflow, clear),因为元素的布局会对对相邻元素产生影响,自身甚至会脱离原来的文档流,所以比较重要。

2. 盒模型相关(width, height, margin, padding)

3. 外观 (color, background, border, box-shadow)

4. 文字排版 (font-size, font-family, text-align, text-transform)

5. 其他 (cursor, z-index)

爆肝整理|前端开发规范-CSS规范

爆肝整理|前端开发规范-CSS规范


爆肝整理|前端开发规范-CSS规范
你要的分享、在看与点赞都在这儿~
往期推荐
爆肝整理|前端开发规范-CSS规范
爆肝整理|前端开发规范-CSS规范

爆肝整理|前端开发规范-CSS规范