html - CSS:我应该使用 mixin 还是类？

Question

我正在为我的个人元素之一使用 boostrap CSS 框架。默认情况下，所有 col 类的两边都有填充。这对某些组件有好处。但有些地方我不想要这种额外的填充。所以我通常只使用一个独特的类(比如 containerName)来设置元素的样式，然后-

.containerName {
 padding-right: 0;
 padding-left: 0;
 //and whatever other css is required
}

我不想一次又一次写这篇文章。所以我决定为此编写一个简单的 mixin。

%removePadding { 
padding-right: 0; 
padding-left: 0;
}

然后在 .containerName 上使用扩展

.containerName {
 @extend %removePadding;
 //and whatever other css is required
}

这是矫枉过正吗？我是否应该向具有这两个规则的元素添加另一个类？

处理此问题的最佳方法是什么？

Answer 1

我认为您应该将“.removePadding”用作一个类，一次。因为在任何情况下，您都需要检查哪些 div 需要填充，哪些 div 不需要。因此，如果您只是将“.removePadding”类添加到您的 div，就在您的 col-... 类之后，您将拥有相同的控件，而且更重要的是，您不会扩展您的 CSS 文件。另一方面，您可以通过查看 HTML 文件来了解发生了什么。就像常见的“.clearfix”类。

在 Bootstrap 样式之后添加此 CSS 规则(.removePadding 类)以覆盖它们。