应用CSS-DRY概念

我有以下CSS：

    &.fixed-map {
      width: 100%!important;
      position: fixed!important;
      left: 0;
    }
    &.under-750 {
      width: 100%!important;
      position: static;
    }
    &.over-1025 {
      position: static;
    }

从CSS的角度来看，这是否会提高性能

&.fixed-map,
&.under-750 {
  width: 100%!important;
}
&.under-750,
&.over-1025 {
  position: static;
}
&.fixed-map {
    position: fixed!important;
    left: 0;
}

---

或者这仅仅是编写CSS的一种更好的方法吗？

从敏捷的角度来看，我肯定会使用第一种方法。 此类优化（如果它真的是优化）将由机器处理。不是编码员

想象一下，您想要在-750下修改

.under的宽度

使用第一种方法。

旁注：仅使用
重要信息仅作为最后一种可能性。
从敏捷的角度来看，我肯定会使用第一种方法。
此类优化（如果它真的是优化）将由机器处理。不是编码员

想象一下，您想要在-750下修改
.under的宽度

使用第一种方法。

旁注：仅使用
重要信息仅作为最后一种可能性。
干燥代码所带来的性能提升基本上可以忽略不计。将干式原理应用到CSS中所获得的好处与您（和其他开发人员）理解它的方式有关

当然，如果将示例外推到一个庞大的代码库中，您可能会看到性能略有提高，但是DRY的好处更多的是为了理解，而不是使CSS更具性能

在创建CSS时，像DRY这样的概念很重要，但它们不是死守的规则。如果CSS中的重复有助于您理解正在发生的事情，那么它就不是一个主要的罪过

我希望您正在使用gzip压缩服务您的CSS文件，如果您不这样做，我建议您这样做；从性能的角度来看，通过gzip服务的CSS中的重复处理得非常好。这就是为什么您会发现，一般情况下，不再建议将媒体查询存储到它们自己的块中，这些块包含每个特定媒体表达式的样式。如果样式正好位于CSS中所修改样式的旁边，则更容易理解如何在媒体查询中修改样式

我还建议不要编写与它们应用的视觉样式直接相关的类名，即重新考虑如何命名
。在-750
下和
。在-1025上，因为我确信750和1025与您在其他地方设置的某些像素值有关


tl；dr：没有现成的（双关语）正确答案。在编写CSS时，DRY是一个非常好的概念，但最终您应该努力编写可理解且可维护的CSS。
通过干燥代码获得的性能提升基本上可以忽略不计。将干式原理应用到CSS中所获得的好处与您（和其他开发人员）理解它的方式有关

当然，如果将示例外推到一个庞大的代码库中，您可能会看到性能略有提高，但是DRY的好处更多的是为了理解，而不是使CSS更具性能

在创建CSS时，像DRY这样的概念很重要，但它们不是死守的规则。如果CSS中的重复有助于您理解正在发生的事情，那么它就不是一个主要的罪过

我希望您正在使用gzip压缩服务您的CSS文件，如果您不这样做，我建议您这样做；从性能的角度来看，通过gzip服务的CSS中的重复处理得非常好。这就是为什么您会发现，一般情况下，不再建议将媒体查询存储到它们自己的块中，这些块包含每个特定媒体表达式的样式。如果样式正好位于CSS中所修改样式的旁边，则更容易理解如何在媒体查询中修改样式

我还建议不要编写与它们应用的视觉样式直接相关的类名，即重新考虑如何命名
。在-750
下和
。在-1025上，因为我确信750和1025与您在其他地方设置的某些像素值有关


tl；dr：没有现成的（双关语）正确答案。在编写CSS时，DRY是一个非常好的概念，可以放在你的脑海中，但最终你应该努力编写可理解和可维护的CSS。
sass-lang.com/guide-关于变量的部分可能会很方便ass-lang.com/guide-关于变量的部分可能会很方便