21

可能的重复：
如何管理 CSS 爆炸

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

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

补充说明： 我使用的是 CSS 框架，很难保持padding和margin协调。

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

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

关闭说明：

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

我很惊讶我的回答没有得到支持——即使其他人的无价投入，我认为它站得很好。

从我的角度来看，我的接受将主要基于答案的可用性——可悲的是，这种观点无法消化一些更令人兴奋和更全面的回答。

完全重复关闭

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

4

7 回答 7

16

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

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

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

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

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

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

于 2012-06-15T21:32:16.437 回答
9

我对 css 清理的价值 2p，来自之前的一个类似问题： 清理和维护大 css 文件的提示

希望这可以帮助您与其他人的答案一起！

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

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

  3. 尝试识别未使用/冗余的 css 并摆脱它。

  4. 您可以尝试使选择器更短（例如 .main .foo .bar 可能与 .bar 一样好） - 它会提高可读性并提高性能，但请稍加注意，并准备好在事情开始时返回在你迈出的每一步都打破。

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

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

  7. 之后，您可以考虑使用 CSS 预处理器，例如 Less 或 Sass，允许您定义变量和 mixin（类似于函数）、模块化等等——尽管这最终可能是一项非常昂贵的任务，因此请仔细评估是否这样会给你带来比痛苦更多的好处。

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

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

编辑

事情永远改变和发展；关于 OOCSS/SMACSS 方法，我很高兴地关注了一段时间，Yandex 的CSS BEM 方法，我想将它作为附加推荐添加到上面

于 2012-06-17T22:04:21.610 回答
3

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

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

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

于 2012-05-20T16:23:04.167 回答
2

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

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

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

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

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

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

于 2012-06-21T07:54:30.767 回答
2

基于当前这一轮工作，这是我到目前为止所得到的：

规划

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

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

    工作

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

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

这个答案是关于注释的；“我使用的是 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/

于 2012-06-19T20:41:34.193 回答
0

这比如何管理流程的 Q 更多关于使您的 css 可维护的建议。

我创建了一堆单独的 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”的文件中，该文件仅指定边距。

于 2012-06-21T14:56:48.023 回答