Css 更少：最好使用继承或多个类

我有一个

inputbase（）{}

类的文件更少。我经常使用它，但不是每种输入类型。当我编译时，在输出的CSS文件中有很多重复的样式

我了解了引导如何减少网格的使用，他们使用相同的方法；其中，

列1 etc

将从

列

基类继承。这似乎又产生了很多CSS

---

我应该在每个

中使用

.inputbase.specificClass

而不是使用较少的继承吗？

首先，它似乎取决于您使用的较少的版本。看一看。首先，它被确定为一个bug。在这种情况下，您可以选择等待bug修复或更改代码

稍后将讨论它是否是bug。括号的不同用法会产生不同的结果。另外，它们的问题是关于与类同名的mixin，另请参见：

各种选项，无固定答案 这将在很大程度上取决于您的代码、目标等，以及如何将样式添加到各种元素中。这里有一些可能性，每个都有优点和缺点

1。混音（您当前所做的）

少

CSS输出

如果

.inputbase（）

中的代码超过一行或两行，并且混合在多个实例中，则会生成大量额外的代码。这就是你所面临的问题

2。扩展一个类

看起来是这样，但目前（小于1.5），这只需要一个类定义，因此：

少

CSS输出

优点是所有的基本代码都不重复，但重复的是选择器，因为它们首先与基本代码一起分组，然后再为单个代码输出。如果希望将代码分组到一个选择器定义中，那么这将不是一个好办法。否则，这将提供一种减少CSS输出的好方法

3。两个类（您建议的额外html标记）

这是您提出的一个解决方案，有两个类（这是因为您声明并不总是希望将

.inputbase

应用于输入元素）

减少和CSS输出*

这确实有最少的CSS，但它的缺点是它还需要两个类的额外HTML标记，

等

4。一个具有基覆盖的类

这可能比上面的更好

减少和CSS输出

如果大多数输入都有baseinput代码，您只需在

input

元素定义中定义基本输入代码，然后只需覆盖特殊css代码中不需要的属性。这允许只应用单个类来减少html。这将减少CSS和HTML的混乱，但缺点是记住基本代码是什么，如果需要可以重写它

总结

---

什么是最好的取决于你所面临的特殊情况。但是，也许这两个额外的选择将帮助您思考您的案例。我个人在大多数情况下都会选择2号或4号，但同样，1号和3号也有申请。

对不起，我想我没有解释清楚。我的意思是我应该在一个元素上使用多个类还是使用一个大类。后者使用较少的继承。选项2看起来很适合。谢谢你的回答，太棒了

.someInput{&:extend（.inputbase）；/*一些输入特殊代码*/}

就是我要找的！非常感谢您的分享。非常好的回答！！感谢所有的细节，选项2似乎是最合适的！

.inputbase() {
  /* your base code */
}

.someInput {
  .inputbase;
  /*some input special code */
}

.someOtherInput {
  .inputbase;
  /*some other input special code */
}

.andAnotherInput {
  .inputbase;
  /*and another input special code */
}

.someInput {
  /* your base code */

  /*some input special code */  
}
.someOtherInput {
  /* your base code */

  /*some other input special code */    
}
.andAnotherInput {
  /* your base code */

  /*and another input special code */    
}

.inputbase {
  /* your base code */
}

.someInput {
  &:extend(.inputbase);
  /*some input special code */
}

.someOtherInput {
  &:extend(.inputbase);
  /*some other input special code */
}

.andAnotherInput {
  &:extend(.inputbase);
  /*and another input special code */
}

.inputbase, /* this is gone once mixin extending allows .inputbase() extension */
.someInput,
.someOtherInput,
.andAnotherInput {
  /* your base code */   
}
.someInput {
  /*some input special code */    
}
.someOtherInput {
  /*some other input special code */   
}
.andAnotherInput {
  /*and another input special code */   
}

.inputbase {
  /* your base code */
}

.someInput {
  /*some input special code */
}

.someOtherInput {
  /*some other input special code */
}

.andAnotherInput {
  /*and another input special code */
}

input {
  /* your base code */
}

.someInput {
  /*some input special code */
  /*override input base code if needed */
}

.someOtherInput {
  /*some other input special code */
  /*no override if not needed */
}

.andAnotherInput {
  /*and another input special code */
  /*no override if not needed */
}