OO CSS

作者: 大瓶绿茶 | 来源:发表于2017-02-09 23:47 被阅读0次

面向对象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

相关文章

  • OO CSS(面向对象的CSS)

    面向对象的CSS OO CSS的概念解读 OO CSS的作用和注意事项 OO CSS代码实战 众多开发者忽视了CS...

  • OO CSS 学习

    OO CSS 的概念 OO CSS 是什么?简单一句话就是面向对象的CSS。OO CSS 将页面可重用元素抽象成一...

  • oo css

    1、概念:oo:面向对象oocss将页面可重用元素抽象成一个类,用class加以描述,而与其对应的html即可看成...

  • OO CSS

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

  • 615

    (*’(OO)’*)(*’(OO)’*)(*’(OO)’*)(*’(OO)’*)(*’(OO)’*)(*’(OO)...

  • 谁知道呢?

    o(o)oo(o)oo(o)oo(o)oo(o)oo(o)oo(o)oo(o)oo(o)oo(o)oo(o)oo(...

  • 广州遇见莎莎

    *^O^*O(∩_∩)O~O(∩_∩)OO(∩_∩)OO(∩_∩)OO(∩_∩)OO(∩_∩)O 我又失业了,和...

  • oo哦oo跟着李南江学习HTML5-CSS学习

    慢慢的,我们学到了css,css是用来与html配合使用,经过学习我知道在标签里添加样式是不合理,html是用来添...

  • 《终结拖延症》听书心得

    坚持、坚持、坚持…… (想放弃了,咋办,咋办,咋办o(╥﹏╥)oo(╥﹏╥)o)o(╥﹏╥)oo(╥﹏╥)oo(╥...

  • 设计模式 - 工具箱

    大纲: OO模式 OO基础 OO原则 Point # OO模式 策略模式 观察者模式 装饰者模式 生成器模式 Bu...

网友评论

      本文标题:OO CSS

      本文链接:https://www.haomeiwen.com/subject/cjnwittx.html