css - 如何删除遗留网络应用程序中的 CSS 意大利面条？

Question

在处理过几个大型网络应用程序并看到结构不清晰的巨大样式表之后，我真的很想知道人们是否找到了让大型复杂网络应用程序保持 css 整洁的方法。

您如何从遗留的、乱七八糟的 CSS 转变为清理干净、层叠良好的 DRY 样式表？

我目前正在开发的应用程序有 12000 行 CSS。早在没有标准或 css 审查的情况下，它就有机地发展到这种规模，唯一的规则是使应用程序与设计相匹配。我们经常遇到的一些问题:

• 样式冲突:一名开发人员添加了 .header { font-weight: bold;} 但 .header 已在其他模块中使用，因此不应在这些模块中使用粗体。

• 级联问题:Foo 小部件有一个 .header，但它还包含一个带有 .header 类的 Bar 小部件列表。

  • 如果我们定义 .foo .header { ... } 和 .bar .header { ... } 任何未在 foo 中明确覆盖的内容都将显示在 bar 中。
  • 如果我们定义 .foo > .header 和 .bar > .header 但稍后需要修改 foo 以将标题包装在 div 中，我们的样式就会中断。

• 继承问题，我们不断将小部件字体重新定义为 11px/normal，因为某些顶部容器使用 12px/18px 行高。

• 与小部件库作斗争，使用诸如 dojo/dijit 或 jquery ui 之类的库来添加大量样式以发挥作用，这意味着我们的代码中到处都是我们必须覆盖库样式才能使事物看起来像的地方正确的。大约 2000 行 css 仅用于调整内置 dijit 样式

---

我们正在考虑实现以下规则:

为所有新的小部件类命名空间 - 如果您有一个小部件 foo，所有子类名都将是 .foo_，因此我们得到:.foo、.foo_header、.foo_content、.foo_footer。这使我们的 css 本质上是扁平的，但我们认为没有其他方法可以在不遇到遗留样式或我上面提到的级联问题的情况下继续组织我们的代码。

Police generic styles - 有一小部分通用类，仅适用于非常特殊的情况。例如.editable - 适用于应调用编辑器的句子部分 - 应仅包含文本节点。

利用 css 编译器混入 要避免在不同的小部件中重复定义相同的样式，请定义并使用混入。尽管我们担心 mixin 也会失控。

我们还能如何从不断引入回归的 css 困惑转变为可维护的东西。

Answer 1

我们使用简单 HTML 页面形式的样式指南，其中包含样式表中每个 CSS 规则的示例。很容易判断您是否添加了新的、不兼容的规则，因为这些示例彼此对齐。

我喜欢的一个例子:http://getbootstrap.com/components/ (2015 年添加)

您从这种方法中获得的另一个优点是可重用性:您知道自己得到了什么，并且知道您希望样式指南尽可能小 - 因此:重用。

当您更改已在使用的样式时:检查样式指南。如果它没有改变，那可能很好(如果您刚刚更改了一些内容，包括盒子模型问题，或者通常的宽度、高度、填充、边距，您可能需要浏览一下)。

How do you move from a legacy, mess of css to cleaned up, nicely cascading, DRY stylesheets?

将样式指南用作单元测试。一旦掌握了其中的基本部分:减少、重构和组合(您很可能会发现 .campaign_1 span 与您的常规规则之间存在一些冲突，继承可能是您的 friend )。

Conflicting styles: one developer adds a .header { font-weight: bold;} but .header was already used in other modules and shouldn't be bold in those.

在回复 Adriano Varoli Piazza 的评论和上面的引用时:我不记得这是一个完全属于 CSS 的问题，而是更多地属于 HTML 标记。无论您做什么，都会有些繁重的工作。确定您要保留的规则，并采取行动清除较少使用的规则；例如:通过继承:#news a .header { ... } 或重命名 HTML 类 a .stand_out_header { ... }。

关于下面的想法

Namespace all new widget classes - if you have a widget foo all sub-classnames will be .foo_ so we get: .foo, .foo_header, .foo_content, .foo_footer. This makes our css essentially FLAT, but we see no other way to organize our code going forward without running into the legacy styles or the cascading problems I mentioned above.

改用包含元素，这将更容易维护:

<div id="widget_email">
  <h2>One type of h2</h2>
</div>
<div id="widget_twitter">
  <h2>Another h2</h2>
</div>