css规范

空行&缩进:

缩进为4个空格,

每个选择器上保留一行空行


选择器:

嵌套坚决不允许超过三层,

最右边关键选择器必须为class选择器 觉不允许使用标签选择器/通配符选择器/属性选择器,

当使用id选择器时  绝不允许使用嵌套


页面元素尺寸:

统一使用rem单位,

坚决不允许出现%、px单位


命名:

类选择器统一使用中划线分隔-


图片:

统一使用雪碧图,使用gulp打包工具,

尽可能的避免使用background-size来限制图片大小以避免cpu额外计算,

属性命名时把background-image属性单独抽离出来设值,

千万不要设置background-size来调整图片 

一来会导致性能降低 其次会导致background-position定位失效。

请不要设置在background属性中 会导致gulp打包工具无法命中指定图片


浏览器样式统一:

统一使用static中,

编写好的reset.css文件作为重置样式


关于@import:

在css文件中禁止使用该方法调用其他css文件,

但是在less中可以使用,

webpack会进行编译,

无需担心其性能问题。





选择器权重表:

id=100

class、属性选择器、伪类选择器=10

标签选择器、伪对象选择器=1

多层嵌套时权重相加 同权重按顺序覆盖

!important为强制最高权限  禁止使用

更多请查看css速查手册

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容