ITPub博客

首页 > 应用开发 > Html/css > 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

原创 Html/css 作者:好程序员IT 时间:2019-04-23 15:33:38 0 删除 编辑

   好程序员 web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

最近在 The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCSS、 SMACSS、 BEM、这3个词。“如果还不知道这些是什么,请先不要继续看下去”,联想到作者这样友好(gāo lěng)的提醒,作为围观群众,自然要有所回应。所以,本文在这里分别介绍它们。

  OOCSS、SMACSS及BEM都是有关css的方法论(准确地说,其中BEM应该是一个完整的前端开发理论,不仅限于css),可作为实现优秀css架构(css architecture)的指南。

  css易于理解,但应用和维护并不简单。在各种开发情景下,css都可能成为一个问题点。因此,我们编写和组织css应认真、用心。

  OOCSS

  OOCSS (Object Oriented CSS),字面意思是面向对象的CSS,是由Nicole Sullivan提出的css理论,其主要的两个原则是:

  Separate structure and skin(分离结构和主题) Separate container and content(分离容器和内容)

  用一个例子来说明。请看下面这样的图文排列:

  本作的主角,帝国北部地方贵族施瓦泽男爵的养子,也是托尔兹士官学校特科班 “Ⅶ组”的成员。

   .media{

1.  <p><font size="3">  padding: 10px;</font></p>

2.  <p><font size="3">  }</font></p>

3.  <p><font size="3">  .media:after{</font></p>

4.  <p><font size="3">  display: table;</font></p>

5.  <p><font size="3">  clear: both;</font></p>

6.  <p><font size="3">  content: " ";</font></p>

7.  <p><font size="3">  }</font></p>

8.  <p><font size="3">  .media-image-container{</font></p>

9.  <p><font size="3">  float: left;</font></p>

10.  <p><font size="3">  margin-right: 10px;</font></p>

11.  <p><font size="3">  }</font></p>

12.  <p><font size="3">  .media-image{</font></p>

13.  <p><font size="3">  display: block;</font></p>

14.  <p><font size="3">  }</font></p>

15.  <p><font size="3">  .media-body{</font></p>

16.  <p><font size="3">  overflow: hidden;</font></p>

17.  <p><font size="3">  }</font></p>

18.  <p><font size="3">  .media-shadow{</font></p>

19.  <p><font size="3">  box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);</font></p>

20.  <p><font size="3">  }</font></p>


  上面这段代码用 media表示了这种图文排列的页面元素。如果把构成它的html、css及javascript(如果有)看做一个整体,那就相当于这是一个元件,或者说对象(object)。它可以在站点的任何地方被重用。
  这样是如何体现 OOCSS的两个原则的呢?
  Separate structure and skin
  分离结构和主题是在于将一些视觉样式效果 (例如background、color)作为单独的“主题”来应用。在上面的例子中的阴影效果,没有被直接写在media的样式规则内,而是被单独写在了一个名为media-shadow的class中。因此,它成为了可选择、可拆分的主题。如果不需要对应主题,什么也不要加,如果需要,加上对应的class,就是这样的思路。
  Separate container and content
  分离容器和内容要求使页面元素不依赖于其所处位置。在上面的例子中, css的选择符都很短,无继承选择符(例如.header .media { }),所以,这个图文排列的元件,可以在任何地方使用,且会有一致的外观。
  如果需要在特定的地方让这个元件看起来不一样一些,继续为这个元件增加 class,将“不一样的部分”作为可配置的选项。元件的外观仍不依赖其所处位置。

  操作指南
  可以看出, OOCSS风格的css可以描述为两点:
  增加 class 不使用继承选择符
  OOCSS追求元件的复用,其class命名比较抽象,一般不体现具体内容。

  SMACSS
  SMACSS (Scalable & Modular Architecture for CSS),是由Jonathan Snook提出的css理论。其主要原则有3条:
  Categorizing CSS Rules(为css分类) Naming Rules(命名规则) Minimizing the Depth of Applicability(最小化适配深度)
  这些原则分别是什么意思呢 ?
  Categorizing CSS Rules
  这一点是 SMACSS的核心。SMACSS认为css有5个类别,分别是:
  Base Layout(Major Components) Module(Minor Components) State Theme
  Base Rules, 基础样式,描述的是任何场合下,页面元素的默认外观。它的定义不会用到class和ID。css reset也属于此类。
  Layout Rules, 布局样式。它和后面的Module Rules一同,描述的是页面中的各类具体元素。元素是有层次级别之分的,Layout Rules属于较高的一层,它可以作为层级较低的Module Rules元素的容器。左右分栏、栅格系统等都属于布局样式。
  Module Rules, 模块样式。它可以是一个产品列表,一个导航条。一般来说,Module Rules定义的元素放置于前面说的Layout Rules元素之内。模块是独立的,可以在各种场合重用。
  State Rules, 状态样式,描述的是任一元素在特定状态下的外观。例如,一个消息框可能有success和error两种状态,导航条中的任一项都可能有current状态。
  继续 OOCSS中的例子,下面新增的让元素不显示的is-hidden就属于State Rules:
   ...

1.  <p><font size="3">  复制代码</font></p>

2.  <p><font size="3">  .is-hidden{</font></p>

3.  <p><font size="3">  display: none;</font></p>

4.  <p><font size="3">  }</font></p>


  Theme Rules, 主题样式,描述了页面主题外观,一般是指颜色、背景图。Theme Rules可以修改前面4个类别的样式,且应和前面4个类别分离开来(便于切换,也就是“换肤”)。SMACSS的Theme Rules不要求使用单独的class命名,也就是说,你可以在Module Rules中定义.mod { }然后在Theme Rules中也用.mod { }来定义需要修改的部分。

  Naming Rules
  Naming Rules是说在想class等的命名时,考虑用命名体现样式对应的类别。
  按照前面 5种的划分,Layout Rules用l-或layout-这样的前缀,例如:.l-header、.l-sidebar。
  Module Rules用模块本身的命名,例如图文排列的.media、.media-image。
  State Rules用is-前缀,例如:.is-active、.is-hidden。
  Theme Rules如果作为单独class,用theme-前缀,例如.theme-a-background、.theme-a-shadow。
  Base Rules不会用到class和ID,是以标签选择符为主的样式,例如p、a,无需命名。
  命名规则不需要严格遵守,可以根据实际情况和自身喜好做其他的约定。记录自己的约定 (写文档),然后遵守,就是可行的。
  Minimizing the Depth of Applicability
  字面翻译是最小化适配深度。通过一个简单的描述来说明:
   /* depth 1 */

1.  <p><font size="3">  .sidebar ul h3 { }</font></p>

2.  <p><font size="3">  /* depth 2 */</font></p>

3.  <p><font size="3">  .sub-title { }</font></p>


  上下两端 css的区别在于html和css的耦合度。可以想到,由于上面的样式规则使用了继承选择符,因此对于html的结构实际是有一定依赖的。如果把h3元素搬到另一个位置,就有可能不再具有这些样式。对应的,下面的样式规则只有一个选择符,因此不依赖于特定html结构,只要为元素添加class,就可以获得对应样式。

  当然,继承选择符是有用的,它可以减少因相同命名引发的样式冲突 (常发生于多人协作开发)。但是,我们不应过度使用,在不造成样式冲突的允许范围之内,尽可能使用短的、不限定html结构的选择符。这就是SMACSS的最小化适配深度的意义。

  看起来,这一点和 OOCSS的分离容器和内容的原则非常相似。

  主要目标

  SMACSS着力于实现两个主要目标:

  更语义化的 html和css 降低对特定html结构的依赖 BEM

  BEM,即Block, Element, Modifier,是由Yandex(俄罗斯最著名的互联网企业)的开发团队提出的前端开发理论。BEM通过Block、Element、Modifier来描述页面。

  Block是页面中独立存在的区块,可以在不同场合下被重用。每个页面都可以看做是多个Block组成。
  
  Element是构成Block的元素,只有在对应Block内部才具有意义,是依赖于Block的存在。

  Modifier是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier。
  这三部分结合在一起,可以体现在 class命名上,从而为开发者提供更友好、更有意义的css组织方式。其形式是:
   .block { }

1.  <p><font size="3">  .block_modifier { }</font></p>

2.  <p><font size="3">  .block__element { }</font></p>

3.  <p><font size="3">  .block__element_modifier { }</font></p>


  再回到前面 OOCSS的那个图文排列的例子,对应用BEM的写法的话就是:
  本作的主角,帝国北部地方贵族施瓦泽男爵的养子,也是托尔兹士官学校特科班 “Ⅶ组”的成员。
  这样的写法的好处是,在 class命名上以约定的形式携带了更多有用信息。在多人合作的时候,新接手这个项目的人,也可以很容易从class命名上分辨出来,哪些部分是Block,哪些是对应的Element,哪些是Modifier,并进一步推断出哪部分html可以独立使用。

  BEM是完整的前端开发理论,这里只是提到了它采用的css的class命名规则。可以看出,BEM的命名规则可以使代码更易于维护。
  这些理论真的可以应用吗 ?
  是的,而且有用。但是,请不要过于乐观,任一种理论都只是对解决 css编写、维护问题的一种尝试,及其经验总结。就实际具体的项目来说,你可能仍然会遇到困惑。这些理论最重要的是提供了一种思路(即使它们也提供开发模式的代码库),你可能不直接应用它们,但应该通过它们认识到,在写代码之前,需要多一些思考。
  不直接编写 css而是采用less、sass等预编译器,也同样需要合理的代码编写和组织方式,因为可以从编译后得到的css来分析,所以原则是相通的。

  结语
  在整理写文本之前,我只初步了解过 OOCSS,而对另外2个还没有印象...(嗯,其实很正常)
  本文的 3个理论各有各的风格,没有孰优孰劣之说,都是在编写css时值得参考的内容。如果可以,非常推荐自己根据这些理论背后的意图,想一个适合自己的方法。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2642267/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    188
  • 访问量
    145180