在項(xiàng)目開發(fā)周期中，構(gòu)建一個(gè) CSS 項(xiàng)目可能會(huì)是你遇見的最困難的事情之一。構(gòu)建完成后，保持整體結(jié)構(gòu)的一致性并使所有設(shè)置有意義，則更加困難。

幸運(yùn)的是，使用 CSS 預(yù)處理器的一個(gè)最主要好處就是可以拆分代碼庫到幾個(gè)文件中，而又不會(huì)影響性能（正像 CSS 指令?@import?的功能）。感謝 Sass 重載了?@import?指令，在開發(fā)中即使使用大量文件都是安全的（實(shí)際上非常推薦），部署時(shí)所有文件都會(huì)被編譯進(jìn)一個(gè)單一樣式表。

最重要的是，我無法形容我是多么需要設(shè)置大量的文件夾——即使是小項(xiàng)目中。這就像是在家里，你不會(huì)將所有的紙片放在同一個(gè)盒子中。你可以使用文件夾：一個(gè)為房產(chǎn)，一個(gè)為銀行，一個(gè)為賬單，等等。沒有理由在構(gòu)架 CSS 項(xiàng)目時(shí)不這么做。拆分代碼庫到多個(gè)有意義的文件夾，當(dāng)你回頭來找東西的時(shí)候就會(huì)發(fā)現(xiàn)是那么容易。

有很多受歡迎的構(gòu)建 CSS 項(xiàng)目的體系結(jié)構(gòu)：OOCSS,?Atomic Design,?Bootstrap式,?Foundation?式…它們各有優(yōu)劣，難分伯仲。

我自己使用的方式，與?Jonathan Snook?的?SMACSS?非常相似，其致力于保持代碼簡潔易見。

我認(rèn)為，項(xiàng)目之間的結(jié)構(gòu)是極其具體的。你完全可以隨意摒棄或調(diào)整建議方案，擁有最適合自己需求的體系系統(tǒng)。

擴(kuò)展閱讀

• Architecture for a Sass project
• A Look at Different Sass Architectures
• SMACSS
• An Introduction to OOCSS
• Atomic Web Design
• Sass, une architecture composée