6.8 可扩展模块化架构CSS代码规范(1)

针对上一节提到的目标、误区,我们需要一套对应的CSS编写方式,用前人总结的最佳实践来作为指导方针,并且这种方式不应该根据项目的变化而变化。关于CSS的架构方式,比较重要的三个分别是:OOCSS,BEM和SMACSS。Drupal选择了SMACSS,他是Drupal8的CSS架构标准。Zen、Omega、Zurb Foundation主题都采用了SMACSS的方式来架构CSS。它的作者是Jonathan Snook,你可以在http://smacss.com找到更多详细资料,以下只做简单介绍。

SMACSS描述了如何编写灵活可扩展的CSS代码的方法,它的核心思路是将CSS规则进行合理的分类。一共分为以下五类:

1. Base

2. Layout

3. Module

4. State

5. Theme

这里的Module和Theme和Drupal中的对应名词没有关系。对此,Zen的作者曾经吐槽说:看来,Jonathan Snook在提出SMACSS概念的时候一定考虑过一个问题,就是,我怎样才能搞昏那帮玩Drupal的人。见https://www.drupal.org/node/1921610#comment-7099982(link is external)

 

Base:

这一类样式属于默认样式,大部分情况下都是单一的元素选择器,也包括属性、伪类、子元素、后代选择器。它不包括类选择器和ID选择器。如:

html, body, form { margin: 0; padding: 0; }
 
input[type=text] { border: 1px solid #999; }
 
a { color: #039; }
 
a:hover { color: #03C; }

它的主要功能一般是设置标题大小、默认链接样式、默认字体样式、页面背景等。并且在这一组中不应该使用!important 。前端中经常使用的CSS Resets 和 Nomalize都应该属于这一组。

 

Layout:

Layout规则一般用来指定页面中比较大的部分,如Header, Sidebar, Content, Footer等。这些在Drupal中往往被做成区域(region)。他们可以被细分成更小的区域,这些则被划分到Module类中。Layout规则是唯一允许并推荐使用ID选择器的分组。但是如果使用网格系统的话,类选择器也是被允许的。一般来说layout使用单一选择器,可以是ID也可以是Class。如:

#header,
 
#footer {
 
  /* Some CSS properties */
 
}
 
#sidebar-first,
 
#sidebar-second {
 
  /* Some CSS properties */
 
}
 
#content {
 
  /* Some CSS properties */
 
}

某些使用多个选择器组合起来的情况:有时需要根据用户的选择变换页面元素的样式——这种情况下,可在 layout 的父级元素上指定派生/上下文选择器(通常是在body上指定)。

用上级元素样式影响下级元素样式:

#article {
 
    float: left;
 
} 
 
#sidebar {
 
    float: right;
 
} 
 
.l-flipped #article {
 
    float: right;
 
} 
 
.l-flipped #sidebar {
 
    float: left;
 
}

此处.l-flipped被指派给上级元素,比如body,从而使得 article 和 sidebar可以互换位置。 

两种样式混用:

#article {
 
    width: 80%;
 
    float: left;
 
}
 
#sidebar {
 
    width: 20%;
 
    float: right;
 
}
 
.l-fixed #article {
 
    width: 600px;
 
} 
 
.l-fixed #sidebar {
 
    width: 200px;
 
}

这里使用.l-fixed 类来改变布局,从流式布局(使用百分比进行定义)改为固定布局(使用像素进行定义)。

 

另外,需要指出的是,在Layout组中,ID选择器的命名没有特殊规定,但是类选择器都使用“l-”作为前缀,以示区别。

本书共55小节。


评论 (0)