Question

可能重复：
How to Manage CSS Explosion

我打算用一致的样式和一致的CSS方案构建我的网站。但是当我调整单个页面（特别是主搜索表单）时，样式已经失控。

我已经完成了一次破坏样式并几乎从头开始重建的过程，现在看起来是时候再次这样做了。我怎么能有效率呢？我正在寻找一种方法，而不是软件实用程序（虽然我愿意接受那些建议......除非他们花钱......）。

添加说明：我正在使用CSS框架，很难让padding和margin保持协调。

已添加注释2 ：此帖子的初始回复是关于CSS的最佳做法。我们假设我已经尝试过遵循最佳实践（事实上，我做过）。现在这是我正在寻找的清理程序。

添加了备注3 ：截至6月14日，将this response（我刚发现）与我的帖子结合起来可能是一个全面的答案。

关闭说明：

我知道我的问题太笼统了，因此我希望我没有发布它。（也许这就是为什么它得到了一次投票......我将永远不知道没有评论来解释原因。）另一方面，我得到了我需要的东西，所以我很高兴我发布了它。

我很惊讶我没有对我的答案进行投票 - 即使有其他人无价的投入，我认为它很好。

从我的观点来看，我的接受主要取决于答案的可用性 - 这一观点令人遗憾地无法消化一些更激动人心和全面的答案。

作为完全重复关闭

我只是尝试再次发布此内容（主题，正文，标签）以查看是否会建议帖子“如何管理CSS爆炸”。有趣的是，它没有。我在该帖子中添加了标记refactoring。

Answer 1

将您的CSS拆分为单独的文件。

将CSS重置（如果使用的话）放入一个文件中
然后创建一个global.css文件，您将在其中放置全局样式适用于所有页面
然后为您的各个页面创建单独的文件

然后开始设置您的网页样式。每当您找到可在多个页面上重用的样式规则时，将其设为CSS类并将其放入global.css文件中。避免使用css ID。您会发现您经常会重复使用或将来重复使用。在这种情况下，您使用的课程是CSS类。

最终你会发现在你的global.css中你会发现大多数CSS类规则和html标签规则。

在您的个人页面CSS文件中，您可以找到每个页面的特定样式。

这应该会在CSS中为您提供良好的第一级组织。您可以尝试在整个开发过程中保持这种分离，并且对于发行版，将CSS文件合并为一个并缩小它。

Answer 2

我的2p值得关于css清理，来自之前的类似问题： Tips for cleaning and maintaining a big css file

希望这可以帮助你和其他人一起回答！

开始分支项目（这里我假设你使用的是版本控制工具） - 这将允许你独立玩代码并标记你将达到的任何里程碑。
使用美化器格式化您的CSS - 它将提高可读性，并有助于搜索特定声明而不会遗漏任何实例。
尝试识别未使用/冗余的css并将其删除。
你可以尝试让你的选择器缩短（例如.main .foo .bar可能没那么好.bar） - 它会提高可读性并提高性能，但是要用一点盐就可以了如果事情在你采取的每一步都开始破裂，那就回去吧。
尽可能消除任何！important - 如果需要，使选择器更具体。如果大多数！重要声明都是为了解决特定于浏览器的问题，那么css重置可能会有所帮助，否则现在引入css重置可能会增加更多问题而不是解决它们 - 如果您的应用中没有css重置所有
将css分解并重新组合成不同的模块（如果有帮助则将文件重新组合） - 面向对象的CSS是一种可以使事物更易于维护的技术，如果你从它开始它最有效，但它也可以帮助你重构。 https://github.com/stubbornella/oocss/wiki是有效的，但您可以考虑使用其他替代方案，例如SMACSS。
之后，您可以考虑使用诸如Less或Sass之类的css预处理器，允许您定义变量和mixins（类似于函数），模块化等等 - 这可能最终成为一项非常昂贵的任务，所以要仔细评估这是否会给你带来比疼痛更多的好处。
尽可能多地进行测试，考虑单元测试以确保您所做的任何更改不会破坏其他任何地方。
有时重写一切可能比重构更省时，所以如果你的评估表明重构不会带来足够的好处，所以不要害怕保留原样。

修改

事情发生变化并且发展顺利;关于OOCSS / SMACSS方法，我很高兴地关注了一段时间，Yandex's BEM methodology用于CSS，我想将其作为对上述内容的补充推荐

Answer 3

我要做的第一件事是根据目的分离CSS。也许首先是一般页面布局（DIV，盒子......），然后是样式（字体，H1 / H2 /.../ Hn标题），然后是一些更专业的CSS（用于表格的CSS，用于表格，用于特定组件该网站）。

这种分离有助于组织变革;如果你必须更改或添加字体，你知道你会在造型部分找到它。如果你必须改变页面布局，那么也是如此，等等。

当你有“个人页面”时，事情会变得混乱;是他们的布局所以不同？您可能必须尽可能地抽象页面的常用功能（例如，主内容容器框）。然后考虑专门设计更多布局（1列，2列）等。如果你有一个程序员背景，只需考虑类和继承，这个概念 - 是的，我知道它是一个完全不同的领域...... - 但这个概念在设计你的css时很有用。

Answer 4

根据目前的这一轮工作，这是我到目前为止所做的：

规划

拥有一个用于处理HTML和CSS中的待办事项表示法的系统。许多IDE直接支持这一点，或者全局搜索功能也可以。除了标记问题之外，您还需要注意优先级甚至功能区域（但要保持简单，而不是负担）。
不要开始修改代码。使用您的待办事项系统首先进行计划。
制作一份简明的总体目标清单
- 考虑整体的音节变化，例如颜色或字体方案。
- 查看CSS的最佳做法。确定您的方法无效的区域，或者可以更一致地应用好方法的区域。例子：
  - 合并课程
  - 消除随意使用内嵌式
  - 删除未使用或冗余或冲突的样式
  - 提高一般一致性;应用一组约定
  - 改进计量单位
  - 使用反映内容而非格式
- 决定您希望支持多少浏览器市场以及拥抱或依赖最新标准的数量。
- 决定是否有任何新方法要采用。例子：
  - 使用重置样式表来标准化浏览器显示
  - 使用CSS框架
  - 使用专门的图书馆，例如帮助表格
  - 动态CSS （我最近遵循建议使用PHP来处理我的CSS，所以我可以动态控制我的配色方案。但我回到了直接的CSS，因为我喜欢我的IDE中的CSS代码的呈现和混合方法搞砸了。）
查看您的目标列表，并决定现在应该采取哪些措施。如果可能的话，任何大规模的变更都应视为单独的。如果您的列布局很乱，那么现在不是时候了解CSS如何优雅地替换您的javascript。最佳实践，风格变化等也是如此。
如果您的CSS文件配置了速度（例如，压缩的足迹或单个文件中的所有CSS），请更改它。将代码分解为人类可管理的格式。稍后当您完成后，尝试进行基准测试，看看更易读的版本是否也足够高效地用于生产。
将您的CSS提交到validator。请注意您要修复的任何违规行为。
在HTML中查找内嵌样式的实例（搜索style属性）。请注意应该移动到样式表的任何内容。

工作
关注你的待办事项经理。进行常识性备份。当你去的时候，在几个浏览器上测试你的工作。
如果您使用正则表达式，请注意：正则表达式通常无法有效或安全地重写CSS。（不像HTML那样危险，但仍然如此）。将CSS更改发送到HTML中时，正则表达式可能很有用，但请小心。
如果您对边距和填充进行了大量调整，请尝试将所有这些调整全局重置为0px（好的，请在此处使用regex）。然后系统地建立他们备份。你可以用这种方式解决很多困惑。当然，在此过程中不要包含任何库或框架样式表。
再次，将您的CSS提交到validator。

Answer 5

我看到人们已经建议使用OOCSS等方法，所以我将提供一个不同的/额外的思路。我相信这个问题比你的CSS以及你编写它的方式更深层次。我相信你的CSS失控的原因是你的问题的引用：

...当我微调各个页面时......

这让我觉得问题多在你的设计中，而不是你的CSS，所以让我详细说明一下。在我看来，一个伟大的设计是一个不必为每个页面定制的设计 - 并且有几个原因。主要原因是，正如您自己提到的，您的CSS失控了。 对各个元素的小调整和修复，取决于它们的位置，经常导致混乱，这是一个难以维护和使用。这里还有一个可用性原因。我相信如果用户熟悉用户界面并在页面之间识别自己，UI就会变得更容易使用，而不会有太多变化。当然，你可能有一些在每个页面上都没有的元素，或者页面之间有所不同，但我总是努力将它们保持在最低限度。

我的建议是，如果您打算重写CSS，这无论如何都是耗时且辛苦的工作，那么为什么不在同一时间重新评估您的设计。您可能会发现有些元素可以修改，以便它们看起来相同。将目标摆脱尽可能多的UI元素，而不影响设计。当你尽可能地统一设计时，是时候重构你的CSS，甚至你的标记？

此时，摆脱所有CSS并重新开始可能会更好。如果你继续使用旧的代码，很容易变得懒惰并陷入一些旧的低效代码。

对于编码，我相信其他答案包含许多好的建议和最佳实践。我个人会投票支持 OOCSS ，这也是我自己的新发现，但它改进了我构建CSS的方式。所以看看吧！这也有助于您考虑重用元素和CSS，这对于简化CSS很有帮助。

Answer 6

这个答案是关于这个说明的; “我正在使用CSS框架，很难保持填充和边距协调。”仅

使用css预处理器可以解决这个问题。因为css无法分配继承，因此我们必须一遍又一遍地重复'margin：10px'。

使用预处理器

@margin {10px}
@padding {10px}

然后

.mySelector{
    margin: @margin;
    padding: @padding;
}

对于更广泛的问题，重新考虑/简化您的设计，因为您的css与设计的复杂性成正比，您无能为力。

另见http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

Answer 7

这是关于使你的css可维护的更多建议，而不是关于如何管理过程的Q.

我创建了一堆独立的css文件，每个文件都根据特定属性（颜色，字体，边距，边角）或特征（nav，form）进行了狭窄的定制。然后，我使用编译阶段将这些文件组合并缩小为一个或多个要发送到客户端的文件。我在构建/测试过程中执行此操作，但可以通过CGI脚本动态完成。

在采用预编译器之前，请考虑经常被忽视的多选择器语法：

element,
otherlement
{
  margin:10px;
}

在这个例子中，每当我想要一个元素有10px的边距时，我就把它添加到列表中。我用这种方式分隔不同的属性集 - 我可以在我的css中列出相同的元素5次 - 将它与5个不同的属性集相关联。

另外，不要忽视在body标签中添加各种类来创建类似OO的继承 - 比如你有3个主要部分 - 根据这些部分为body标签分配一个类。同样，如果您有1000个产品页面，则可以为body标签提供类似“product485”的类，然后创建仅适用于该页面的样式。例如：

h1 {
  margin: 10px;
}
.product485 h1,
.product484 h1
{
  margin: 5px;
}
.contact h1 {
  margin: 15px;
}

这可能都在名为“margins.css”的文件中，该文件仅指定边距。

我如何重构我的CSS？

7 个答案:

规划

工作