DRY 原理的精确性答案

【问题标题】：Preciseness of DRY Principle [closed]DRY 原理的精确性
【发布时间】：2015-01-27 20:44:48
【问题描述】：

过去几周我一直在研究 html/css，现在正尝试使用 DRY 原则（以及 SMACSS/OOCSS/BEM）优化我的代码。我相信我对这一切都有相当的了解，但有一件事我还不清楚。

是否应该 100% 应用 DRY 原则？例如，假设您有“文本转换：大写；”应用于两个不同的类。根据 DRY 原则，您将从每个单独的类中删除规则集，并将其放在两个类的逗号分隔列表下。但是过了一会儿，这不是让你的样式表变得一团糟，每个类都在同一张表上被多次声明吗？或者，您的工作表长什么样真的不重要，因为如果将来需要进行任何更改，您只需在搜索框中搜索“大写”即可？

您似乎不会从这种情况下获得任何性能改进。是的，您将从工作表中删除一个属性，但您还将添加一个全新的规则集并重复类名。

我知道这可以根据偏好和每个项目采用任何一种方式，但我更关心可能是最有效的方式（尤其是在构建大型复杂网站时）。我希望在我所有的项目中保持一致。

有什么准则可以参考吗？例如，如果您要删除的属性数量大于 X，也许只合并重复的代码？还是仅在语义相关时合并重复代码？

【问题讨论】：

最好在Software Engineering 询问。
在 2015 年，无论您如何编写它，都很难找到一款能够与 CSS（不滥用变换/过渡/阴影）抗衡的设备，因此您不必太担心性能代码可维护性。
诸如 LESS 或 SASS 之类的 CSS 预处理器将有助于在不牺牲可维护性的情况下为您提供 DRY。特别是关于 DRY 规则，我想说它适用于两个类总是一起变化的情况。在大写示例中，如果您的主题中某些标题是大写的，那么 DRY 是有意义的。如果每个标题都可以是大写或小写，那么 DRY 就没有意义，因为它们在概念上是独立变化的。
我的意见：phrogz.net/CSS/HowToDevelopWithCSS.html#groupstyles “对此的一个警告是，您不应该尝试消除所有出现的样式重复。当两个元素碰巧共享相同的颜色或字体大小时由于与这些元素的含义无关的设计决策的结果，那么它们以后可能想要具有不同的颜色、大小等。虽然稍后将复合选择器拆分为其组件并不困难，您可以通过不过度合并每个样式/值对来节省一些工作。”

标签： html css dry

【解决方案1】：

如果您优化可维护性，而不是严格遵守任何特定的教条，那么阅读您的代码的程序员会感谢您。

请不要误会。 DRY 很重要，但您应该通过简单的健全性检查的变体来调整它（或任何其他设计模式）：“这有意义吗？”。在 DRY 的情况下，这将类似于“这些实际上相关吗？”。

如果答案是“是”，则强烈暗示如果其中一个类要删除 text-transform:uppercase;，那么另一个类也将删除它。

如果答案是“否”，那么您实际上会使以后的维护变得更加困难，因为您需要撤消两个类之间的人为耦合。

在这种情况下，简单地列出使用特定属性的类的清单是假的 DRY，因为您肯定在重复自己。重复只是从属性转移到类。

【讨论】：

【解决方案2】：

DRY 原则是关于“不重复自己”。如果只有您要处理同一个文件，那么我建议以您可以理解（足够清晰）的方式进行编码，以便您可以在需要时轻松编辑它。但是，如果其他人也打算这样做，那么保持它的清洁和干燥就更重要了。

您可能会争辩说，应用 DRY 原则并不是真正必要的，因为您可以重复自己，代码仍然可以工作。但是你可能会争论，为什么要使用 Sass（它是一个编译器，可以让你的 css 更短），你可能会争论为什么要压缩你的 css 文件（这样网站加载得更快），因为没有它，它仍然可以工作！

我的建议是始终考虑尽可能保持干燥和清洁。在您的示例中，您指出了一个小细节，当您清理 CSS 并且您意识到您只保存了 2 额外的 CSS 行时，DRY 方法不会产生很大的不同。但是如果你有 10.000 行 CSS 时应用它呢？

它使您只定义一次属性。如果您需要一个示例，说明它可以为您节省多少代码行数和重要性，请查看：http://www.slideshare.net/jeremyclarke/dry-css-a-dontrepeatyourself-methodology-for-creating-efficient-unified-and-scalable-stylesheets

从长远来看，它会让您的样式表更加简洁，您和其他人更容易理解，并且更容易编辑！所以我会说它非常重要，如果你能从一开始就深入了解它，你以后会非常感激:)

【讨论】：

【解决方案3】：

是否应该 100% 应用 DRY 原则？

不，它不是故意的。

DRY 用于管理规范的信息源。 DRY是为了避免“此信息出现两次但不一样-正确吗？”的问题。

与 DRY 没有区别：

.foo { text-transform: uppercase; color: red  } 
.bar { text-transform: uppercase; color: blue }

和

.foo { color: red  } 
.bar { color: blue } 
.foo, bar { text-transform: uppercase; }

因为text-transform: uppercase 实际上是一个单一的信息单元。 DRY 的重点不是让编码人员通过重构重复的字符串来复制压缩算法，而是识别出多次表达相同语义关系的地方。

如果.foo 和.bar 都用于需要大写的角色，则可能值得使用后一个规则，因为您可能希望同时更改两者。但是，如果它们用于两个碰巧都需要大写字母的不同事物，则使用前一个规则，因为没有理由改变一个规则就需要改变后者。

有了这个特殊的例子和更普遍的 CSS，这一切都非常重要。

【讨论】：