在項目開發周期中，構建一個 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)