如何重构我的 CSS？ [复制]

Question

可能重复：
How to Manage CSS Explosion

我打算用一致的样式和连贯的 CSS 方案来构建我的网站。但是当我微调各个页面（尤其是主搜索表单）时，样式已经失控了。

我已经经历过一次分解样式并几乎从头开始重建的过程，现在看来是时候再做一次了。我怎样才能有效地做到这一点？我正在寻找一种方法，而不是软件实用程序（尽管我愿意接受那里的建议......除非他们花钱......）。

补充说明：我正在使用 CSS 框架，很难保持 padding 和 margin 协调一致。

添加注释 2： 对这篇文章的最初回复是关于 CSS 的最佳实践。假设我已经尝试遵循最佳实践（事实上，我确实这样做了）。现在是我正在寻找的清理程序。

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

结束说明：

我了解到我的问题过于笼统，因此我希望我没有发布它。 （也许这就是它被否决的原因......如果没有评论来解释原因，我永远不会知道。）另一方面，我得到了我需要的东西，所以我很高兴我确实发布了它。

我很惊讶我的回答没有得到赞成票——即使其他人提出了无价的意见，我认为它还是站得住脚的。

从我的角度来看，我的接受很大程度上取决于答案的可用性——遗憾的是，这种观点无法消化一些更令人兴奋和更全面的回答。

完全重复关闭

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

Answer 1

我对 css 清理的 2p 价值，来自之前的一个类似问题： Tips for cleaning and maintaining a big css file

希望这可以帮助您连同其他人的答案！

1. 开始分支项目（这里我假设您使用的是版本控制工具）——这将允许您独立使用代码并标记您将达到的任何里程碑。

2. 使用美化器格式化您的 CSS - 这将增加可读性，并有助于搜索特定声明而不会丢失任何实例。

3. 尝试识别未使用/冗余的 css 并将其删除。

1234563如果你走的每一步都开始出现问题，那就回去吧。

4. 如果可能，尽量消除任何 !important - 如果需要，使选择器更加具体。如果大多数 !important 语句用于修复特定于浏览器的问题，则 css 重置可能会有所帮助，否则现在引入 css 重置可能会增加比解决问题更多的问题 - 如果您的应用程序中没有 css 重置全部。

5. 将 css 分解并重新组合成不同的模块（如果有帮助的话，还有文件） - 面向对象的 CSS 是一种可能的技术，可以让事情更易于维护，如果你从它开始，它效果最好，但它也可以帮助你重构。 https://github.com/stubbornella/oocss/wiki 是有效的，但您可以考虑其他替代方案，例如 SMACSS。

1234563 ，因此请仔细评估这是否会给您带来更多好处而不是痛苦。

6. 尽可能多地测试，考虑单元测试以确保您所做的任何更改都不会破坏其他地方的任何东西。

7. 有时重写所有内容可能最终会比重构花费更少的时间，因此，如果您的评估表明重构不会带来足够的好处，请不要害怕保持原样。

编辑

事情会永远改变和发展；关于 OOCSS/SMACSS 方法，我一直很高兴地关注了一段时间，Yandex's BEM methodology 用于 CSS，我想将其作为附加建议添加到上述内容中

Answer 2

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

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

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

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

此时，最好摆脱所有 CSS 并重新开始。如果您继续使用旧代码，很容易变得懒惰并被一些效率较低的旧代码卡住。

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

Answer 3

这是关于如何让你的 css 可维护的更多建议，而不是如何管理流程的 Q。

我创建了一堆单独的 css 文件，每个文件都针对特定属性（颜色、字体、边距、角）或功能（导航、表单）进行了严格定制。然后我使用编译阶段将这些文件组合并缩小为一个或多个文件以发送给客户端。我在构建/测试过程中执行此操作，但可以通过 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”的文件中，它只指定边距。

Answer 4

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

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

然后开始为您的页面设置样式。每次您找到可在许多页面上重复使用的样式规则时将其设为 CSS 类并将其放入 global.css 文件中。避免使用 css ID。你会发现自己更频繁地重复使用东西，或者将来会重复使用。在这种情况下，您当然会使用 CSS 类。

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

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

这应该可以为您的 CSS 提供良好的第一层次的组织。您可以尝试在整个开发过程中保持这种分离，并在发布时将 CSS 文件合并为一个并缩小它。

Answer 5

这个答案是关于笔记的； “我使用的是 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 6

基于当前这一轮工作，以下是我目前的成果：

规划

1. 拥有一个系统来处理 HTML 和 CSS 中的待办事项符号。许多 IDE 直接支持这一点，或者全局搜索功能就可以了。除了标记问题外，您还需要注意优先级，甚至可能是功能区域（但要保持简单，而不是负担）。
2. 不要开始修改您的代码。首先使用您的待办事项系统进行计划。
3. 简要列出您的总体目标。
   
   • 考虑整体风格变化，例如颜色或字体方案。
   • 查看 CSS 的最佳实践。确定您的方法无效的领域，或者可以更一致地应用好的方法的领域。例子：
     • 整合课程
     • 消除随意使用内嵌样式
     • 删除未使用、冗余或冲突的样式
     • 提高总体一致性；应用一组约定
     • 改进计量单位
     • 使用反映内容而非格式的类和 ID 名称
   • 确定您希望支持多少浏览器市场，以及在多大程度上采用或依赖最新标准。
   • 决定是否要采用任何新方法。例子：
     • 使用重置样式表标准化浏览器显示
     • 使用 CSS 框架
     • 使用专门的库，例如帮助处理表单
     • 动态 CSS （我最近遵循建议使用 PHP 来处理我的 CSS，所以我可以动态控制我的配色方案。但我回到了纯 CSS，因为我喜欢我的 IDE 中的 CSS 代码的呈现方式和混合方法搞砸了。）
4. 查看您的目标列表并决定现在应该追求的目标。如果可能的话，任何大规模的变化都应该被单独对待。如果您的列布局一团糟，那么现在不是学习 CSS 如何优雅地替代您的 javascript 的时候。最佳做法、风格变化等也是如此。
5. 如果您将 CSS 文件配置为提高速度（例如，压缩占用空间或将所有 CSS 放在一个文件中），请进行更改。将代码分解为人工可管理的格式。稍后，当您完成后，尝试进行基准测试，看看更清晰的版本是否也足够高效以供生产使用。
6. 将您的 CSS 提交至validator。记下您要修复的任何违规行为。

7. 在您的 HTML 中查找内嵌样式的实例（搜索 style 属性）。请注意任何应移至样式表的内容。

   作品

8. 关注您的待办事项经理。做常识性的备份。在进行过程中，在多个浏览器上测试您的工作。

9. 如果您喜欢正则表达式，请注意：正则表达式通常对重写 CSS 无效或不安全。 （不像 HTML 那样危险，但仍然如此）。正则表达式可能有助于将 CSS 更改发送到 HTML，但请再次小心。
10. 如果您对边距和填充有很多调整，请尝试将它们全部重置为0px（好的，在此处使用正则表达式）。然后系统地建立它们备份。你可以通过这种方式解决很多困惑。当然，不要在此过程中包含任何库或框架样式表。
11. 再次，将您的 CSS 提交到 validator。

Answer 7

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

这样的分离有助于组织变化；如果您必须更改或添加字体，您知道您会在样式部分找到它。 如果您必须更改页面布局，则相同，依此类推。

当您拥有“单个页面”时，事情往往会变得混乱；他们的布局那么不同吗？ 您可能必须尽可能抽象出页面的共同特征（例如，主要内容容器框）。 然后考虑更多地专注于布局（1-column，2-column）等等。 如果您有程序员背景，只需考虑类和继承，这个概念 - 是的，我知道这是一个完全不同的领域...... - 但这个概念在设计 css 时很有用。