结构

在项目开发周期中，构建一个 CSS 项目可能会是你遇见的最困难的事情之一。构建完成后，保持整体结构的一致性并使所有设置有意义，则更加困难。 幸运的是，使用 CSS 预处理器的一个最主要好处就是可以拆分代码库到几个文件中，而又不会影响性能（正像 CSS 指令 `@import` 的功能）。感谢 Sass 重载了 `@import` 指令，在开发中即使使用大量文件都是安全的（实际上非常推荐），部署时所有文件都会被编译进一个单一样式表。 最重要的是，我无法形容我是多么需要设置大量的文件夹——即使是小项目中。这就像是在家里，你不会将所有的纸片放在同一个盒子中。你可以使用文件夹：一个为房产，一个为银行，一个为账单，等等。没有理由在构架 CSS 项目时不这么做。拆分代码库到多个有意义的文件夹，当你回头来找东西的时候就会发现是那么容易。 有很多受欢迎的构建 CSS 项目的体系结构：[OOCSS](http://oocss.org/), [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/), [Bootstrap](http://getbootstrap.com/)式, [Foundation](http://foundation.zurb.com/) 式…它们各有优劣，难分伯仲。 我自己使用的方式，与 [Jonathan Snook](http://snook.ca/) 的 [SMACSS](https://smacss.com/) 非常相似，其致力于保持代码简洁易见。 我认为，项目之间的结构是极其具体的。你完全可以随意摒弃或调整建议方案，拥有最适合自己需求的体系系统。 ## 扩展阅读 * [Architecture for a Sass project](http://www.sitepoint.com/architecture-sass-project/) * [A Look at Different Sass Architectures](http://www.sitepoint.com/look-different-sass-architectures/) * [SMACSS](https://smacss.com/) * [An Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) * [Atomic Web Design](http://bradfrost.com/blog/post/atomic-web-design/) * [Sass, une architecture composée](http://slides.com/hugogiraudel/sass-une-architecture-composee)