OO CSS

面向对象CSS的注意事项:
1、对于组件,不要直接定义子节点,应把共性声明放到父类
.mod .inner{....}建议的写法
.inner{....}不建议的写法

2、结构和皮肤分离
<div class="container simpleExt"></div>建议的写法
<div class="container"></div>不建议的写法

3、容器与内容分离(自我感觉与第一点相悖)
.container ul //ul依赖了容器
.rankList ul //解除与容器的依赖,可以从一个容器转移到其他容器

4、抽象出克重用的元素,建好组件库,在组件库内寻找可用的元素组件页面。

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

6、对象应该保持独立性

7、避免使用ID选择器,权重太高,无法重用。

8、避免位置相关的样式

header .container{...},#footer .container{...}不建议的方式

9、保证选择器相同的权重

10、类名 简短 清晰 语义化 OOCSS的名字并不影响HTML语义化

http://oocss.org/
http://thx.github.io/cube/doc/neat

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 8,915评论 1 19
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,681评论 1 92
  • 周六,扑案工作之余,需要放松调节下身心。思想动多了,就要调整过来让身体多动动。于是,我一个人从苏州的东边跑到挨着太...
    坚冰至_Monsol阅读 6,783评论 3 51
  • 文/绮心 角田光代,一个细腻沉寂的人,私人生活极其保密,自幼沉迷文学,立志在写作上有所成就。如今的她与吉本芭娜娜、...
    李梓妍Li阅读 3,649评论 0 1
  • 记录自己读过的书和感想,写写随笔等。 感兴趣书的领域: 1、人文 2、地理&历史 3、大数据技术 SPARK、HI...
    阿橦木阅读 1,157评论 0 1