样式之OOCSS - mowatermelon/studyNode GitHub Wiki

1 定义 OOCSS将页面可重用元素抽象成一个类，用class加以描述，而其对应的html即可以堪称是此类的一个实例，具有封装，继承，对象特性

2 作用

• 2.1 加强代码复用方便维护
• 2.2 减少体积
• 2.3 提升渲染效率
• 2.4 组件库思想，栅格布局可共用，减少选择器，方便扩展

3 注意事项

• 3.1 不要直接定义子节点，使用多层嵌套后代选择器，应该把共性声明放到父类中 即可继承的样式，就直接在父级定义

• 3.2 结构和皮肤像分离 可分离的样式应该分开独立，减少耦合

• 3.3 容器和内容相分离 大体框架控制布局，具体板块的样式，不要先选择父级再用后代选择器选自己，子类自己玩自己的，方便后期还可以换父级

• 3.4 抽象出可复用的元素，建好组件库，在组件库内租着可用的元素组装页面

• 3.5 往你想要扩展的对象本身增加class，而不是他的父节点

• 3.6 对象应保持独立性， 正确使用语义化

• 3.7 避免使用id选择器，权重太高，无法重用

• 3.8 保证选择器相同的权重

• 3.9 避免位置相关的样式 .header .container{} .footer .container{} 这样不太好

• 3.10 类名简短，清晰，语义化，class命名不影响html的语义化 SEO主要针对标签对