进阶篇16. 新的CSS的架构、编写方式

关于CSS的架构、编写方式,比较重要的四个分别是:BEMOOCSSSMACSSAtomic Design。如果你还不知道他们是什么,请自行学习。以下的简介仅仅起到入门的作用。

BEM

BEM,即Block、Element、Modifier,它把页面上的元素看成一个一个的Block,组成block的是Element,Modifier用于描述block或者element的状态或者属性。

这三部分结合在一起,可以体现在class命名上,从而为开发者提供更友好、更有意义的css组织方式。其形式是:

.block { }
.block_modifier { }
.block__element { }
.block__element_modifier { }

来看一个简单的例子:

<ul>
  <li>
     <a>
       <span></span>
     </a>
  </li>
</ul>

那么对应的我们就可以设计出如下的 BEM class:

<ul class="menu menu_round">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

其中,menu是block,menu__item,menu__link和menu__text是组成menu的element,menu_round是对menu的描述,根据名字,我们可以知道这组menu是圆角的。

这样写的好处是,类名之间的关系比较清晰,易读。而且,每一个标签都有一个自己的类名,这样在编写样式的时候不需要使用SASS嵌套或者CSS后代选择器去定位block里面的某个标签,比如,如果你要设置这里menu中链接的样式,你不必写成:

.menu a { color:red; }
/*  或者  */
ul a { color:red; }

而是可以直接写成:

.menu__link { color:red;  }

在第一个例子中a和ul都是html标签,也是CSS概念中的元素选择器。“ul a”这种写法是CSS概念中的后代选择器。但是使用元素选择器和后代选择器编写样式的时候,会使得你的样式表依赖于HTML文档,如果HTML标签变化了,或者文档结构变化了,样式就会出问题。而第二个例子中直接使用BEM方法给出的类名来定位元素,则不会产生类似的问题。

BEM的这个特点对于组件化的思路尤为重要,我们之后会讲到。

OOCSS

OOCSS应该是大部分前端开发者都比较熟悉的,因为Bootstrap就是使用了OOCSS的规范。我就不详细介绍了。

SMACSS

在我写上一本书的时候,正是Drupal8呼之欲出的时刻,当时,Drupal8虽然还没有发布,但是社区中已经确定了使用SMACSS并且推出了相关的CSS编码标准,见上一本书的第六章第789节。这些内容直到现在依然是前端工程师值得参考的,如果你想读原文原文请移步Drupal CSS Coding standards。我们在第一篇第19节中提过,当你定义库的时候,你需要指明你引入的css属于SMACSS的哪个类别。如下:

#THEME.libraries.yml
global:
  css:
    base:
      css/normalize.css: {}
      css/base.css: {}
    layout:
      css/layout.css: {}
    components:
      css/components.css: {}
    theme:
      css/theme.css: {}
    print:
      css/print.css: { media: print }
  js:
    js/modernizr.js: {}

为了省事儿,也因为很多人不知道什么是SMACSS,人们会把以上的样式表全部写到theme这个级别里,这样不符合标准,但是实质上也没有什么影响:

#THEME.libraries.yml
global:
  css:
    theme:
      css/styles.css: {}
      css/print.css: { media: print }

Atomic design

原子设计理论的内容比较多,单独放在下一节中,请继续阅读。

本书共83小节:

评论 (写第一个评论)