在样式表中使用mixins或组合样式更好吗？

我想知道在性能，可读性和日常用例方面哪种编码样式表更好。在样式表中使用mixins或组合样式更好吗？

比方说，我们要的风格：

.container { 
    background-color: red; 
    .nested-container { 
    color: blue; 
    } 
} 

.container-two { 
    background-color: black; 
    .nested-container { 
    color: blue; 
    } 
}

我不知道哪条路是对此类案件的效率更高。

/* mixins way */ 
@mixin duplicated-container { 
    .nested-container { 
     color: blue; 
    } 
} 

.container { 
    background-color: red; 
    @include duplicated-container; 
} 
.container-two { 
    background-color: black; 
    @include duplicated-container; 
} 

/* combined sets way */ 
.container { 
    background-color: red; 
} 
.container-two { 
    background-color: black; 
} 
.container, 
.container-two { 
    .nested-container { 
    color: blue; 
    } 
}

第一种方式更可读，至少对我而言。第二种方法使输出文件比使用mixins时更小，因为代码不会以任何方式复制。

请记住，这只是我想实现的非常简单的例子，如果container和container-two位于文件中的两个不同位置，第一种方式使其非常易读并易于使用，但它重复代码在最终输出，所以我不知道这是否是好使用mixins这种方式。

对于我来说这几年来一直是个大难题，我决定请求专业人员帮忙，因为我总是以凌乱的样式表结束。我感谢所有帮助。

来源

2017-08-11 rk-dev.net

如果您担心文件大小，请使用CSS压缩器/缩小器。可以考虑任何一种情况的可读性。这取决于实际情况。 – 4castle

感谢您的回答。我已经使用'CSS Minifier'。问题是，如果这个'mixin'是50行代码，我们最终会得到50行代码的数量，在第二种情况下，我们最终只有50行代码。对我来说，破解是非常困难的。 –

第一个看起来是更好的选择，因为类在一个地方列出。

第二种方法是，一旦添加了.container-three，您不得不记得将其添加到.nested-container正在从中获取其样式的类列表中。

使用mixin时，不应该担心文件大小。对于大多数服务器，使用现代化的CSS缩小器和gzip内容管道，在CSS中复制内容不会显着增加文件大小，并且might even perform better。

不要担心重复的代码。这是一个微型优化，无论如何gzip都会进行大量优化。在这种情况下去可读性。

来源

2017-08-12 08:11:16

这是非常好的文章，为我澄清了很多！非常感谢您的支持以及您的时间！ –

在样式表中使用mixins或组合样式更好吗？

回答

相关问题