重构CSS的工具和技术

Question

我需要更普遍地这样做，但目前很好的例子是我的两个菜单。我有两个菜单类horizontal-menu和vertical-menu，以及这些类下的ul，li和a等元素的两套规则。其中许多规则都有一些共同点，例如color元素的a值。我想将常用规则和值重构为名为menu的“超类”，并且只在我的horizontal-menu和vertical-menu类中重写值。是否有一个工具（除了提出这个问题的工具之外）可以帮助我解决这个问题？

Answer 1

这类问题的最佳工具是Compass，这是一个用于定义规则的框架，然后将这些规则编译成css以供生产使用。它允许您以与命令式语言非常相同的方式定义变量。

它还有其他有用的概念，例如 mixins ，它允许定义一组css属性，这些属性将定期一起使用，这样您就可以在多个标准CSS规则中包含该属性块。然后，你可以在一个地方编辑mixin，更改属性并将更改传播到任何使用mixin的CSS规则。

我发现了Compass，并在a screencast Chris Coyier CSS Tricks {{3}}了解了应该如何使用它。

在这种情况下（实际上大多数情况下）唯一的问题是你必须从头开始使用Compass，或者找到一种将工作流程集成到现有工作流程中的方法。

Answer 2

您可能需要csscss一次。我写这篇文章是为了了解我在自己的样式表中重复了多少。我显然有偏见，但很多人发现它也很有帮助。 SASS，LESS和Compass支持已经完成。

另一个很棒的工具是helium，它是一个在浏览器中运行的javascript工具，可以让你知道任何未使用的规则。