SMACSS:一个关于CSS的最佳实践-3.Layout Rules

  本篇笔者要介绍的是Layout Rules。看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules。

什么是Layout Rules?

  Layout Rules指的是用于布局的CSS。我们常常对布局和内容不加区分,总是将所有的CSS写在一块,从而降低了代码的可重用性。SMACSS将布局CSS抽象为Layout Rules,内容CSS抽象为Module Rules。一个module只需要关心自己长什么样就可以了,至于放在哪里,那是它的容器需要考虑的问题。所以,用于布局的CSS完全可以独立出来。

  Layout样式可大可小,大的样式诸如header, footer, sidebar等等,为整个页面的大布局;小的如grid系统。通常,大布局如header, footer, sidebar只需要一个ID选择符就足够了。但是基于可重用的考虑,我们应该尽量避免使用ID,而是花点时间去思考下如何从中抽象出一个公共的class。实际上,已经有很多的CSS框架提供了可重用的布局系统。

Layout Rules实例

  接下来,我们需要通过一个例子来加深对Layout Rules的理解。

 技术分享

  上图中,我们看见一个grid,grid包含了一条条新闻,我们将其HTML代码简化为如下:

1 <div>
2     <h2>Featured</h2>
3     <ul>
4         <li><a href="…"></a></li>
5         <li><a href="…"></a></li>
6 7     </ul>
8 </div>

在不应用SMACSS的情况下,一般人可能会这么写CSS代码,给最外层的div加上一个ID:

 1 div#featured ul {
 2     margin: 0;
 3     padding: 0;
 4     list-style-type: none;
 5 }
 6 div#featured li {
 7     float: left;
 8     height: 100px;
 9     margin-left: 10px;
10 }

这种写法存在几个问题:

  1. 使用ID作为选择符,无法重用
  2. li元素将高度设置为100px,更加限定了其业务场景,无法通用
  3. 已经使用ID选择符,则前面的div选择符已经没有必要存在了,这样做不但增加了浏览器的比较次数,同时也限定了最外层只能是div

之所以会出现这样的css,究其原因是没有将布局及内容进行区分。在这个例子中,我们可以将用于布局的grid抽象为Layout Rules,而作为内容的新闻信息可以抽象为Module Rules。

1 .l-grid {
2     margin: 0;
3     padding: 0;
4     list-style-type: none;
5 }
6 .l-grid > li {
7     display: inline-block;
8     margin: 0 0 10px 10px;
9 }

这样,一个通用的grid布局便完成了,它只负责布局,不关心里面的内容。li的高度由里面的内容决定。下篇笔者将介绍Module Rules,它是关于内容的CSS。

相关阅读

  上一篇 SMACSS:一个关于CSS的最佳实践-2.Base Rules

  下一篇 SMACSS:一个关于CSS的最佳实践-4.Module Rules

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。