acsaga的博客

Scalable and Modula Architecture for CSS 确实是一本很好的书。明白的说明了很多我一直以来的疑问，把写css过程中遇到的问题做了清晰的解构。很有收获。

这里总结一下要点，方便以后在自己的项目中查看和运用。

CSS的结构：

1. Base：对所有html element通用的样式，比如reset.css或者a等element的默认样式。

2. Layout：和页面整体结构有关的样式。比如.header .footer .sidebar等等。

3. Module：页面中的内容模块。比如.post .article等等。

4. State：状态信息。比如.is-hidden .is-expanded .is-active等等

5. Theme：主题。如果页面同时支持多个主题，那么其他主题的module和state模块显示在这里。

命名规则：

1. Base：只包含html element，不要class或者id。

2. Layout：以layout-开头，比如.layout-header .layout-grid

3. Module：没有指定开头，就以模块本身命名。但是模块的子class要包含模块名。比如.module, .module-title, .module-text

4. State：以is-开头。

5. Theme：主题。前面几个部分的不同主题。以.theme-开头。

注意事项：

1. Base：

• 最default最general的设定，不要包含!important。
• 最好指定body的background。
• 在所有项目中使用基本相同的base。
• 尽量只用base做reset。不要牵扯太多module的东西。比如table button等属于module，不要把大块代码写到base里。

2. Layout：

• 只包含和布局相关的element以及attribute。尽量简洁抽象。

3. Module：

• 不要包含layout中的class。要用自己的class来表达同一个模块各种不同的布局。比如.pod, .pod-constrained, .pod-callout
• 可以把icon做成一个单独的module，这样会为编码的灵活性带来诸多好处。比如.ico .ico-inbox .ico-drafts。（和css sprites一起用）

4. State：

• 表示layout或者module的状态。
• javascript通过调整state的class，来控制页面显示。
• 可以包含!important。
• media query也算是state的一种。
• 状态命名的时候，尽量和module独立，比如.btn .is-pressed要好于.btn .btn-pressed。

5. Theme：nothing special

6. 其他注意事项：

• 为了效率，除了在base里，尽量不要用element selector。尤其不要放在selector的最右侧。
• 为了效率，一个selector的元素个数应该尽可能的少。
• 为了效率，尽可能的用 > 的css selector来缩小和指定选择的范围

Preprocessors

有节制的使用sass一类的preprocessor可以让编码的逻辑变的更清晰，让编码速度更快。

要注意，使用的时候，不要让生成的代码违背上面的基本原则。

文件组织：

"site-settings",

"mixins",

"base",

"states",

"layout/grid",

"module/btn",

"module/bookmarks",

"module/callout";