css:oo css

2017-01-04 10:33:18来源:segmentfault作者:lx_blog人点击

oo css

既面向对象的css


作用

1.加强代码的复用方便维护。
2.减小css体积。
3.提升渲染效率。
4.组件库思想、栅格布局可共用、减少选择器、方便扩展。


注意事项

1.不要直接定义子节点,应把共性声明放到父类。
2.结构和皮肤相分离。
3.容器和内容想相分离。
4.抽象出可重用的元素,建好组件库,在组件库内寻找可用元素组装页面。
5.往你想要扩展的对象本身增加class而不是他的父节点。
6.对象应保持独立性。
7.避免位置相关的样式。
8.避免使用id选择器,权重太高,无法重用。
9.保证选择器相同的权重。
10.类名 简短 清晰 语义化 oocss的名字 并不影响html语义化。


比如

neat.css less.css sass.css等


less 和 sass 区别

less基于javascript 用于日常工作代码中。
sass基于ruby 用于写大型的基础库。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台