结构

2018-02-23 16:21 更新

在项目开发周期中,构建一个 CSS 项目可能会是你遇见的最困难的事情之一。构建完成后,保持整体结构的一致性并使所有设置有意义,则更加困难。

幸运的是,使用 CSS 预处理器的一个最主要好处就是可以拆分代码库到几个文件中,而又不会影响性能(正像 CSS 指令 @import 的功能)。感谢 Sass 重载了 @import 指令,在开发中即使使用大量文件都是安全的(实际上非常推荐),部署时所有文件都会被编译进一个单一样式表。

最重要的是,我无法形容我是多么需要设置大量的文件夹——即使是小项目中。这就像是在家里,你不会将所有的纸片放在同一个盒子中。你可以使用文件夹:一个为房产,一个为银行,一个为账单,等等。没有理由在构架 CSS 项目时不这么做。拆分代码库到多个有意义的文件夹,当你回头来找东西的时候就会发现是那么容易。

有很多受欢迎的构建 CSS 项目的体系结构:OOCSSAtomic DesignBootstrap式, Foundation 式…它们各有优劣,难分伯仲。

我自己使用的方式,与 Jonathan Snook 的 SMACSS 非常相似,其致力于保持代码简洁易见。

我认为,项目之间的结构是极其具体的。你完全可以随意摒弃或调整建议方案,拥有最适合自己需求的体系系统。

扩展阅读

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号