Question

我有以下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的更好方法吗？

Answer 1

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

想象一下，您想要修改public void SetIsTestPassed(TestCase test) { Thread.Sleep(test.delayedStart); int retries = test.retries; do { List<IOnlineVarRef6> vars = SetCurrentVars(test); test.IsTestPassed = CompareValues(test, vars); if (test.retryDelay > 0 && !test.IsTestPassed) Thread.Sleep(test.retryDelay); retries--; } while (retries != 0 && !test.IsTestPassed); } private List<IOnlineVarRef6> SetCurrentVars(TestCase test) { OnlineManagerHelper OnlineMgr = new OnlineManagerHelper(true); return OnlineMgr.CreateVariableWatch( test.initialVariables .Select(v => Settings.Default.InstancePath + v.Name) .ToList()); }的宽度。

使用第一种方式。

旁注：仅作为最后一种可能性使用.under-750。

Answer 2

从干燥代码中获得的性能提升基本上可以忽略不计。从将DRY原则应用到CSS中获得的奖金与你（以及其他开发人员）将如何理解它有关。

当然，如果你要将你的例子推广到庞大的代码库，你可能会看到轻微的性能提升，但是DRY的好处更多的是理解，而不是让你的CSS更高效。

像DRY这样的概念在创建CSS时要记住很重要，但它们并不是要死的规则。如果它能帮助你理解正在发生的事情，你的CSS中的重复并不是一个重大的罪。

我希望您使用 gzip压缩来提供CSS文件，如果您不是，我建议您这样做。从性能的角度来看，通过gzip提供的CSS重复处理得非常好。这就是为什么您一般会发现，不再建议将媒体查询插入到自己的块中，其中包含每个特定媒体表达式的样式 。如果媒体查询中的样式与CSS中修改的样式相邻，则更容易理解样式的修改方式。

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

tl; dr ：没有剪切和干燥（双关语）正确答案。在编写CSS时，DRY是一个非常棒的概念，但最终你应该努力编写可理解且可维护的CSS。

应用CSS DRY概念

2 个答案: