漫谈SMACSS_html/css_WEB-ITnose
CSS分类
按照SMACSS可以分为5类：
-
Base—— 通常是一些默认样式，reset.css ，normalize.css 之类
html, body, form { margin: 0;}input[type=text] { border: 1px solid #999;}a { color: #390;} -
Layout—— Layout 则是将页面分成几个部分，一个 Layout 中可以有一个或多个Module
.nav {}.footer {}.sidebar {} -
Module—— 这个部分是可复用，模块化的代码，比如弹出框，汉堡按钮。
.panel {}.panel-body {} -
State—— 状态是用来描述Layout，Module的特殊样式。
.is-hidden {} -
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
文档
- Front-end Style Guides
其他资源
- mustache 是一个轻逻辑的模板语言，不受环境影响。
更高级的规范
- 墙裂推荐 Hugo Giraudel 的 Sass Guidelines
彩蛋
我买了 SMACSS 电子书 ，这篇文章是我的学习笔记 + 要点总结。如有需要，留下邮箱，我可以把电子书共享给你（仅供学习交流使用），或者扫描 WeChat 二维码加我为好友。