Fork me on GitHub

MaintainableCSS 《可维护性 CSS》 --- 复用篇

复用

通常,Harry Roberts 所说的 DRY (Don't repeat yourself) 经常被曲解成永远不要重复做通一件事。 但实际上这是不现实的,而且常常导致过分抽象,用太多的精力去过分优化代码,最后得不偿失。

过度抽象化代码有多痛苦,在 语义篇 已经讲过了,Mixins 也是一个问题。

同时我们要去考虑抽象, 我们怎么办呢?

如何复用 Style ?

一种做法是用逗号分隔符实现,例如:

.someThing,
.anotherThing {
    color: red;
}

这就是一个简单的复用技术,关于其他的复用技术,我们会在模块篇,状态篇,修饰符篇讨论。

有关 Mixins

就像工具类一样,修改 mixins 后会自动作用到所有的实例。

同时 mixins 容易致使多个规则,多参数和多条件。这导致后期难以维护。

为了降低复杂度,我们会创建小粒度的 mixins ,例如,作用红色文本 (red text) 。期初开起来不错,但是这并非是 red mixins 声明,更像一个规则本身。color: red?

如果我们需要在多个地方更新规则,搜索和替换就非常必要了,此外,当 red mixin 变为 orange 时,其名称都要更新。

所以,mixins 很不错,我们应该使用它,但是要明智地使用它。

有关 Performance

如果 css 超过了 100kb, 再进行盲目的 DRY ,收效就不是很大了,我们要做的就是使 css 更小,才能使 HTML 更强大。

压缩图片能显著提高性能。这就是我想表达的,解决其他形式的冗余可以提高维护性和性能。

违反 DRY 的原则

例如,如果尝试复用 float:left,就像在不同的 Javascript 对象中复用变量名,这也是不可取的。

最后总结

DRY 如果导致过度抽象和过度编程, 我们会难以维护。所有,我们不应该痴迷它的形式,而应该关注于复用具体的模块。我会在以后章节中说明这些。

posted @ 2017-07-03 10:41  Terry√  阅读(738)  评论(0编辑  收藏  举报