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

时间：2021-08-25 18:59:47

　　本篇笔者要介绍的是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的理解。

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

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

 <div>

     <h2>Featured</h2>

     <ul>

         <li><a href="…">…</a></li>

         <li><a href="…">…</a></li>

         …

     </ul>

 </div>

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

 div#featured ul {

     margin:;

     padding:;

     list-style-type: none;

 }

 div#featured li {

     float: left;

     height: 100px;

     margin-left: 10px;

 }

这种写法存在几个问题：

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

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

 .l-grid {

     margin:;

     padding:;

     list-style-type: none;

 }

 .l-grid > li {

     display: inline-block;

     margin: 0 0 10px 10px;

 }

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

相关阅读

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

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

相关文章