CSS DRY概念应用于

我有以下的CSS：CSS DRY概念应用于

&.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？

来源

2015-06-17 Alex

sass-lang.com/guide - 有关变量的一部分可能会来方便 – Zajo

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

想象一下，你想修改的宽度为.under-750。

使用第一种方法。

旁注：只能使用important!作为最后的可能性。

来源

2015-06-17 12:55:49 Zajo

http://sass-lang.com/guide - 有关变量的部分可能来得心应手。 – Zajo

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

当然，如果您想将您的示例推广到一个庞大的代码库，您可能会看到略微的性能提升，但DRY的好处更多的是理解，而不是让CSS更高性能。

概念，如DRY很重要要记住在创建CSS，但他们不是规则的死亡。如果能够帮助你理解发生的事情，那么在你的CSS中重复并不是一个主要的罪过。

我希望你正在为你的CSS文件提供gzip压缩，如果你不是，我会建议你做;从性能角度来看，通过gzip服务的CSS重复处理得非常好。这就是为什么你会发现，通常，它不再建议您筒仓媒体查询到自己的块，其中包括了样式每个特定媒体表达。如果媒体查询中的样式恰好位于您在CSS中修改的样式旁边，那么理解样式如何修改会更容易。

我也建议针对这直接关系到他们申请视觉样式书写类的名称，即重新思考你是如何命名.under-750和.over-1025，因为我敢肯定，750和1025涉及到一些像素你在别处设置的值。

TL;博士：没有添油加醋（双关语意）正确答案。在编写CSS时，DRY是一个绝妙的概念，但最终你应该努力编写可理解和可维护的CSS。

来源

2015-06-17 13:08:49

CSS DRY概念应用于

回答

相关问题