用更合理的方式写 CSS
OOCSS 和 BEM
出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:
可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
可以帮助我们创建出可重用、易装配的组件。
可以减少嵌套,降低特定性。
可以帮助我们创建出可扩展的样式表。
OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。
参考资料:
Nicole Sullivan 的 OOCSS wiki
Smashing Magazine 的 Introduction to OOCSS
BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。
CSS Trick 的 BEM 101
Harry Roberts 的 introduction to BEM
示例
<article class="listing-card listing-card--featured"> <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1> <p class="listing-card__content"> <p>Vestibulum id ligula porta felis euismod semper.</p> </p> </article>
.listing-card { } .listing-card--featured { } .listing-card__title { } .listing-card__content { }
.listing-card
是一个块(block),表示高层次的组件。.listing-card__title
是一个元素(element),它属于.listing-card
的一部分,因此块是由元素组成的。.listing-card--featured
是一个修饰符(modifier),表示这个块与.listing-card
有着不同的状态或者变化。
OOCSS 和 BEM
出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:
可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
可以帮助我们创建出可重用、易装配的组件。
可以减少嵌套,降低特定性。
可以帮助我们创建出可扩展的样式表。
OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。
参考资料:
Nicole Sullivan 的 OOCSS wiki
Smashing Magazine 的 Introduction to OOCSS
BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。
CSS Trick 的 BEM 101
Harry Roberts 的 introduction to BEM
示例
<article class="listing-card listing-card--featured"> <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1> <p class="listing-card__content"> <p>Vestibulum id ligula porta felis euismod semper.</p> </p> </article>
.listing-card { } .listing-card--featured { } .listing-card__title { } .listing-card__content { }
.listing-card
是一个块(block),表示高层次的组件。.listing-card__title
是一个元素(element),它属于.listing-card
的一部分,因此块是由元素组成的。.listing-card--featured
是一个修饰符(modifier),表示这个块与.listing-card
有着不同的状态或者变化。
更多用更合理的方式写 CSS 相关文章请关注PHP中文网!
上一篇: session产生的cookie文件在本机的哪里?
下一篇: Grails Web服务
推荐阅读
-
PostCSS一种更优雅、更简单的书写CSS方式_html/css_WEB-ITnose
-
用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!
-
用CSS3写的模仿iPhone中的返回按钮
-
用css写一个有趣的奥运五环~。
-
用Html写一个简单的登陆界面_html/css_WEB-ITnose
-
PostCSS一种更优雅、更简单的书写CSS方式_html/css_WEB-ITnose
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose
-
用superslide写的导航栏下拉错位_html/css_WEB-ITnose
-
自己写的几个常用css动画(自己收藏用)
-
java 用二种方式, 追加写入文件, 同时指定文件的编码格式, 读/写线程并发操作同一文件