浅谈我所见的CSS命名风格
2017-09-23 16:13
190 查看
在两年工作中,总结一下我所见的css命名风格。
1.单一class命名
优点:简单,渲染效率高。
缺点:零散,没有模块化。
2. 后代选择器class命名
优点:模块化,只对当前模块有效。
缺点:渲染效率低,增加冗余字符。
3.前缀叠加class命名
优点:可读性好,渲染效率高。
缺点:增加冗余字符。
4.OOCSS(面向对象)命名
优点:语义化,可读性好,渲染性能高。
缺点:不利于频繁重构代码。比如修改上面的padding-bottom的距离,假如改成7px话,是不是类名pb8也要改成pb7。
5.BEM(块、元素、修饰符)命名
优点:语义化,可读性好,渲染性能高。
缺点:暂时没有发现。
6.BEM(块、元素、修饰符)驼峰式class命名
优点:类似于BEM风格,无需区分下划线还是是中横线,可读性好,渲染性能高。
缺点:暂时没有发现。
PS:具体问题具体分析,合理的命名css有利于提高开发效率,便于版本迭代。
1.单一class命名
.header { width: 500px; } .item { text-indent: 20%; }
优点:简单,渲染效率高。
缺点:零散,没有模块化。
2. 后代选择器class命名
.header .item a { font-size:14px; } .header .item a span { color:#000; }
优点:模块化,只对当前模块有效。
缺点:渲染效率低,增加冗余字符。
3.前缀叠加class命名
.header { width: 100%; height: 80px; } .header-item { font-size: 14px; } .header-item-a { color: #0066ff; }
优点:可读性好,渲染效率高。
缺点:增加冗余字符。
4.OOCSS(面向对象)命名
.tr { text-align: right; } .pb8 { padding-bottom: 8px; }
优点:语义化,可读性好,渲染性能高。
缺点:不利于频繁重构代码。比如修改上面的padding-bottom的距离,假如改成7px话,是不是类名pb8也要改成pb7。
5.BEM(块、元素、修饰符)命名
.header { width: 300px; height: 400px; } .header__item { font-size: 16px; } .header--blue { background: #0066ff; }
优点:语义化,可读性好,渲染性能高。
缺点:暂时没有发现。
6.BEM(块、元素、修饰符)驼峰式class命名
.header { width: 100%; height: 80px; } .header-item { font-size:16pc; } .header-isShow { display: block; }
优点:类似于BEM风格,无需区分下划线还是是中横线,可读性好,渲染性能高。
缺点:暂时没有发现。
PS:具体问题具体分析,合理的命名css有利于提高开发效率,便于版本迭代。