编写 CSS 时如何保持井井有条？ [复制]答案

【问题标题】：How can I stay organized when writing CSS? [duplicate]编写 CSS 时如何保持井井有条？ [复制]
【发布时间】：2011-07-22 03:43:54
【问题描述】：

可能重复：
How to Manage CSS Explosion

我发现最困难的事情之一就是保持样式表井井有条。我通常从写一个小的重置部分开始。然后我编写布局块，并在编写 HTML 块时继续逐步添加样式。

然而，在前两个步骤之后，一切都变得一团糟。根据我经常更改的异想天开的 HTML 编码，样式会被添加、删除、遗忘。我找不到一种合乎逻辑的方法来分离和分类我的 CSS。

我发现自己为默认样式、导航和布局创建了单独的工作表。

在编写完页脚的 CSS 后，我无法确定它是否应该进入默认样式表、导航栏或布局文件。它的容器当然是布局的一部分，它的导航菜单也是导航的一部分，但它的样式应该进入基本样式表。我发现自己正在考虑相应地分离 CSS，但这是不对的。

我找不到一种合乎逻辑的方法来将我的想法组织成有序的分类。

谁能给我一些见解？

【问题讨论】：

@Matt，“如何管理 CSS 爆炸”的问题是，当我搜索类似的问题时，从未想到过“爆炸”这个词。然而，“有组织”确实如此，这就是为什么我创建了这个问题，而之前没有意识到另一个问题的存在。不过，我仍然不确定上述问题是否与我自己的问题相同。我对结构很好奇。也许我可以修改措辞？

标签： css coding-style code-organization

【解决方案1】：

让我们从想要对您的网站布局进行一些更改的新程序员的角度来解决这个问题。

我不确定使用框架是否会使事情变得更好、更抽象、更容易学习。

我认为您的组织走在正确的轨道上。

我通常会创建一个default.css 文件，其中包含默认字体、颜色、链接样式等的标记。在这个文件中，我将网站视为一大块带有嵌入图片的漂亮格式化文本。这里没有 <div> 标签样式。通常这意味着内容的很多格式都在那里。但不是新闻页面上的那个特殊按钮，它自己会得到一个news.css。

通常网站可以分为几个部分。页眉、页脚、侧边栏、首页、新闻页、议程等。例如，如果页脚需要为红色，很高兴看到确实包含背景颜色的文件 footer.css。

如果页脚中的链接样式与侧边栏中的相同，请将样式声明放在两个文件中。如果页脚中的链接样式与主体文本相同，则将其放置在default.css 中。尝试确保它是您作为新开发人员首先看到的。

【讨论】：

【解决方案2】：

您可以使用 Compass 等框架来简化 CSS 的某些部分：http://compass-style.org/

它允许您创建变量、mixins，总体而言，它是您可能遇到的大多数 CSS 问题的非常棒的解决方案。

还有其他解决方案，例如 LESS 或其客户端等效 LESS Js (http://lesscss.org/)

【讨论】：

【解决方案3】：

就我个人而言，我的 xhtml 输出有一个小的 php-template-script。所以我的 xhtml 模板位于单独的 .tpl 文件中。这些文件可以相互包含。所以可能有一个 main.tpl，包括开头的 head.tpl 和结尾的 foot.tpl，您必须在特定模板中对页面的动态部分进行编码。

这通常是这样做的，现在您可以简单地为每个模板分配一个样式表。所以有一个foot.css和一个head.css（你可以随意扩展）。

这有助于我在设计网页时有一个清晰的海岸。

希望，这会有所帮助。

【讨论】：

【解决方案4】：

虽然它不能直接回答您的问题，但您是否看过 less.js 或其几个服务器端克隆？也许更少的样式代码会使组织更容易。

【讨论】：