组织 CSS 代码的结构化方式答案

【问题标题】：Structured way to organize CSS code组织 CSS 代码的结构化方式
【发布时间】：2012-04-19 18:03:36
【问题描述】：

在构建一个相对较大的网站时，CSS 结构应该从一开始就进行适当的范围划分和组织。如果不使用 CSS 框架，那么所有内容都可以集中到一个庞大的样式表中，但这很快就会出现问题，并可能成为巨大的维护责任。

在过去的几年里，我已经将我的样式表分解成各种文件，包括：base.css、layout.css、fonts.css、elements.css，但是样式定义很容易在文件之间跳转，这种方法需要要更严格。我没有使用框架，因为我不喜欢 CSS 代码中的预设列和预定义元素。

你们可以建议哪些方法、模式或技巧来保持事情井井有条？什么样的命名约定、可重用性实践和模式是有用的？这是应该使用框架的东西吗？

【问题讨论】：

我怀疑这个问题不太适合 StackOverflow 问答格式的最佳答案。

标签： css organization css-frameworks

【解决方案1】：

关于 Stylus — 缺少分号、冒号和方括号会使您的代码在 IMO 的可读性降低，而不是更多。

【讨论】：

【解决方案2】：

我曾经喜欢 LESS，但现在我是 Stylus 的忠实粉丝，因为我认为它比 LESS/SASS/CSS 编写的代码更简洁——没有分号、冒号或括号。

因为 Stylus（以及 LESS 和 SASS）允许您定义变量、模板和函数，所以我有以下文件，它们应该按此顺序排列：

reset - Eric Meyer's CSS reset 的 Stylus 版本
变量 - 颜色、字体等变量。
templates - border-radius、transitions 和 clearfix 等模板
每个页面的样式（主页、应用、服务条款等）

这些都使用简单的构建脚本连接并编译为 CSS。

您可以看到它们的样子；我为这些东西制作了a GitHub repo。

【讨论】：

【解决方案3】：

对于编写一致且可管理的样式表，CSS LESS 框架非常有益。
LESS 提供以下机制：用于动态编写 CSS 代码的变量、嵌套、mixins、运算符和函数，并且可以在客户端（Internet Explorer 6+、WebKit、Firefox）和服务器端运行，使用 Node.js 或 Rhino。

http://lesscss.org/

【讨论】：