CSS LESS：最好使用继承或多个类

LESS: Better to use inheritance or multiple classes

提问by MaxWillmo

I have a LESS file with an inputbase(){}class. I use it on a lot but not every input type. When I compile I have a lot of repeated styles in the outputted CSS file.

我有一个带inputbase(){}类的 LESS 文件。我经常使用它，但不是每种输入类型。当我编译时，输出的 CSS 文件中有很多重复的样式。

I took a look out how bootstrap use LESS for their grid and they use the same approach; where column 1 etcwould inherit from a columnbase class. Again this seems to generate a lot of CSS.

我查看了 bootstrap 如何为他们的网格使用 LESS，他们使用相同的方法；column 1 etc从哪里继承column基类。同样，这似乎生成了很多 CSS。

Should I be using .inputbase .specificClassin every <input />instead of using LESS inheritance?

我应该.inputbase .specificClass在每个<input />中使用而不是使用 LESS 继承吗？

回答by ScottS

Various Options, No Set Answer

多种选择，无固定答案

It's going to depend a lot upon your code, your goals, etc., how you get styles to the various elements. Here are some possibilities, each with strengths and weaknesses.

这在很大程度上取决于您的代码、您的目标等，以及您如何为各种元素设置样式。这里有一些可能性，每个都有优点和缺点。

1. Mixin (what you currently do)

1. Mixin（你现在在做什么）

LESS

较少的

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

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

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

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

CSS Output

CSS 输出

.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 */    
}

If there is more than a line or two of code in .inputbase(), and if it is mixed in more than just a couple of instances, this will be generating a lot of extra code. This is the issue you find yourself facing.

如果 中的代码超过一两行.inputbase()，并且混合在多个实例中，则会生成大量额外的代码。这是您发现自己面临的问题。

2. Extend a Class

2. 扩展一个类

It appears LESS is just about ready to allow for extending mixins, but at present (LESS 1.5) this requires just a class definition, so this:

看起来LESS 即将允许扩展 mixins，但目前（LESS 1.5）这只需要一个类定义，所以这个：

LESS

较少的

.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 */
}

CSS Output

CSS 输出

.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 */   
}

The advantage is all the base code is not repeated, but what is repeated is the selectors, as they are first grouped together with the base code, then again are output for the individual code. If one likes to keep their code grouped in one selector definition, then this would not be the way to go. Otherwise, this offers a nice way to reduce CSS output.

优点是不重复所有基本代码，但重复的是选择器，因为它们首先与基本代码组合在一起，然后再次为单个代码输出。如果人们喜欢将他们的代码分组在一个选择器定义中，那么这不是可行的方法。否则，这提供了一种减少 CSS 输出的好方法。

3. Two Classes (extra html markup you propose)

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

This one solution you proposed, having two classes (this is because you stated that you do not always want .inputbaseapplied to an input element).

您提出的这个解决方案有两个类（这是因为您声明您并不总是希望.inputbase应用于输入元素）。

LESS and CSS Output*

LESS 和 CSS 输出*

.inputbase {
  /* your base code */
}

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

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

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

This does have the least amount of CSS, but it has the disadvantage that it also requires the extra HTML markup of the two classes, <input class="inputbase someInput" />etc.

这确实具有最少的 CSS，但它的缺点是它还需要两个类的额外 HTML 标记<input class="inputbase someInput" />等。

4. One Class with Override of Base

4. 一个类覆盖 Base

This may be better than the above.

这可能比上面的要好。

LESS and CSS Output

LESS 和 CSS 输出

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 */
}

If most inputs will have the baseinput code, you can simply define your base input code within the inputelement definition, then just override the properties you don't want in your special css code. This allows for less html with just the single class applied <input class="someInput" />. This will keep both the CSS and the HTML less cluttered, but has the disadvantage of remembering what the base code is and being able to override it if needed.

如果大多数输入都有 baseinput 代码，您可以简单地在input元素定义中定义您的基本输入代码，然后在您的特殊 css 代码中覆盖您不需要的属性。这允许仅应用单个类的 html 更少<input class="someInput" />。这将保持 CSS 和 HTML 不那么混乱，但缺点是记住基本代码是什么，并且可以在需要时覆盖它。

Summary

概括

What will be bestdepends too much on the particular circumstances you face. But perhaps the two additional options will help you think through your case. I personally would in most cases opt for #2 or #4, but again, there are applications for #1 and #3 as well.

什么是最好的，很大程度上取决于您面临的特定情况。但也许这两个额外的选项会帮助你思考你的案例。在大多数情况下，我个人会选择#2 或#4，但同样，也有#1 和#3 的应用程序。

回答by Bass Jobsen

In the first place it seems to depend on the version of Less you use. Take a look at https://github.com/twbs/bootstrap/issues/8947. First it has been identified as a bug. In that case you could choose wait for the bug fix or change your code.

首先，它似乎取决于您使用的 Less 版本。看看https://github.com/twbs/bootstrap/issues/8947。首先，它已被确定为错误。在这种情况下，您可以选择等待错误修复或更改代码。

Later on it will discussed if it is a bug or not. Different use of parenthesis will give different results. Also their will be an issue about mixins with the same name as classes, see also: https://github.com/less/less.js/issues/1437

稍后将讨论它是否是错误。括号的不同使用会产生不同的结果。他们也将是关于与类同名的 mixin 的问题，另见：https: //github.com/less/less.js/issues/1437