漫谈 SMACSS

SMACSS (Scalable and Modular Architecture for CSS)发音同“smacks”，它不是框架，不是库。它只是一种组织CSS代码的方法论(或者说是为了让代码可扩展，易维护的一套规范，它会使团队开发更容易)。每个人看世界的角度不同，方法论因人而异，所以这套玩意儿不一定适合你。

CSS分类

按照SMACSS可以分为5类：

1. Base —— 通常是一些默认样式，reset.css ，normalize.css 之类

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

2. Layout —— Layout 则是将页面分成几个部分，一个 Layout 中可以有一个或多个Module

   .nav {
   }
   .footer {
   }
   .sidebar {
   }

3. Module —— 这个部分是可复用，模块化的代码，比如弹出框，汉堡按钮。

   .panel {
   }
   .panel-body {
   }

4. State —— 状态是用来描述Layout，Module的特殊样式。

   .is-hidden {
   }

5. Theme —— Theme是定义多种主题

命名规则

通常使用l-前缀标记这个类名是 Layout, is- 前缀标记为状态类等等，而Modules不需要，该是什么名字就叫什么。

/* Example Module */
.example { }

/* Callout Module */
.callout { }

/* Callout Module with State  */
.callout.is-collapsed { }

/* Inline layout */
.l-inline { }

属性分组

修改css属性时，我们常常需要肉眼搜索目标属性。如果属性杂乱无章，那么我们得花更多的时间查找。有人开发过按css属性字母顺序排列的插件，个人认为不好用，比如需要修改宽高时，需要找到height，再找到width，还是挺麻烦。而通常这类参数是成组出现的。

我们可以按照下列顺序书写：

• Box ( display, float, position, left, top, height, width… )
• Border ( border, border-image, border-radius… )
• Background ( background-color, background-image… )
• Text ( font-family, font-size, text-transform… )
• Other ( other )

选择器性能优化

CSS选择器从右到左进行匹配

body div#content p { 
  color: #003366; 
}

在浏览器查找到p元素的时候，就会往上找是否有div#content这样的父元素，若找到了，则继续向上搜索，知道匹配成功，添加到渲染树中；若找不到，则匹配失败，这块样式不起作用。

控制好饮食，小心吃撑：虽然后代选择器很方便，但是从上面的分析看出来，没遇到p元素，我们都要执行一次向上搜索，代价显然是很昂贵的。

遵循下面三条规范可以帮助你健身：

• 使用子类选择器(’>’，IE6我对不起你)
• 避免使用常用的标签选择器
• 最右选择器使用类名

比如你DOM中有一打H3，假设使用.module h3这样的选择器，那么对于html > body > div > div > ... > h3这样的节点，向上搜索的路径就长了去。改成.module > h3我们只需要搜索24个元素。

颜色声明

尽量使用3或6位的16进制颜色值，因为它们足够简洁。rgb,hsl就稍微有点长了。当然rgba, hsla就避免不了，因为十六进制没有alpha值。

文件组织

• 把所有基本样式放在单独文件
• layout 取决你文件的大小，细化成多个文件或者是放在同一个文件
• 每个模块都独立一个文件
• 子模块取决于项目的大小
• 全局states放在单独文件
• layout,modules states 以及 media queries 放在相应的 modules 文件中

结合Sass, 文件树如下：

+-layout/ 
| +-grid.scss 
| +-alternate.scss 
+-module/ 
| +-callout.scss 
| +-bookmarks.scss 
| +-btn.scss 
| +-btn-compose.scss 
+-base.scss 
+-states.scss

然后在main.scss中引入，

@import
  "base",
  "states",
  "layout/grid",
  "module/btn",
	...

最终产出一个 main.css 文件。可以参考 jonathanpath 的 SASS-SMACSS，github地址

其他资源

CSS Preprocessors

• LESS
• Sass

其他方法论

• OOCSS
• BEM

其他资源

• mustache是一个轻逻辑的模板语言，不受环境影响。

更高级的规范

• 墙裂推荐 Hugo Giraudel 的 Sass Guidelines

彩蛋

我买了 SMACSS 电子书，这篇文章是我的学习笔记 + 要点总结。如有需要，留下邮箱，我可以把电子书共享给你(仅供学习交流使用)，或者扫描 WeChat 二维码加我为好友。

如需转载，请注明出处:http://w3ctrain.com/2016/02/05/smacss/