使用 @extend 时应特别注意，因为有时你会想在你的 HTML 中添加那些类。例如，当你第一次了解 @extend，你很容易就在你所有修饰类中这样使用：

.button { /* button styles */ } /* Bad */ .button--primary { @extend .button; /* modification styles */ }

这样做的问题是，在HTML中，你失去了继承链。这下，用 JavaScript 来选择所有按钮实例变得很难。

一般来说，我决不扩展 UI 组件或任何我后来可能会想知道类型的东西。这是模板的用处，也是另一种帮助区分模板和组件的方式。在你的应用程序逻辑中，你不会需要针对模板，因此可以安全地使用预处理器扩展它。

拿上面提到的模式对话框来说，它看起来可能是这样：

.modal { @extend %dialog; @extend %drop-shadow; @extend %statically-centered; /* other modal styles */ } .modal__close { @extend %dialog__close; /* other close button styles */ } .modal__header { @extend %background-gradient; /* other modal header styles */ } CSS Lint

Nicole Sullivan 和 Nicholas Zakas 创建了 CSS Lint ，一个代码质量检查工具，帮助开发人员检测他们的 CSS 坏习惯。他们的网站这样介绍：

CSS Lint 指出你的 CSS 代码问题。它检查基本语法，并且对代码应用一组规则，查找有问题的模式或效率低下的地方。规则都是可插拔的，因此你可以轻松编写自己的，或是忽略那些你不想要的规则。

虽然一般的规则集对于大多数项目可能并不完美，CSS Lint 最大的特点是它有能力根据你的需要进行定制。这意味着你可以从他们的默认列表中挑出你想要的，也可以编写自己的。

像 CSS Lint 这样的工具，在任何大型团队中都是必不可少的，这可以确保一致和惯例。也正像我在前面提到的，约定伟大的地方是，他们允许像 CSS Lint 这样的工具轻易识别出问题。

基于我上面提出的约定，要编写规则来检查反模式就很容易。这里有我使用的几个建议：

这些显然只是建议，但他们的主要目的，就是让你思考你的项目要如何加强标准。

HTML Inspector

早些时候，我提到，要找出 HTML 中用到却不曾在任何样式表中定义的类是很容易的。我目前正在开发一个工具叫做 HTML Inspector ，它让这个过程更简单。

HTML Inspector 遍历你的 HTML（很像 CSS Lint），允许你编写自己的规则，在一些惯例被打破时抛出错误和警告。我目前使用以下规则：

总结

CSS 不只是视觉设计。不要因为你写的是 CSS，就丢掉编程最佳实践。像 OOP，DRY，开放/闭合的原则，关注点分离等概念仍然适用于 CSS。

我们的底线是，无论如何组织代码，请确保判断方法的标准是，它们是否在长远上，真正让你的开发变得更加简单、易于维护。

翻译说明

Sass 部分，因为我只用过 LESS，所以理解不一定准确