LESS：更好地使用继承或多个类 [英] LESS: Better to use inheritance or multiple classes

问题描述

下午

我有一个LESS文件，包含 inputbase（）{} 我使用它很多，但不是每个输入类型。当我编译我有很多重复的样式在输出的CSS文件。

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.

我看了一下bootstrap如何使用LESS作为他们的网格，他们使用同样的方法;其中 column 1 etc 将从列继承基类。再次，这似乎产生了很多CSS。

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

我应该使用 .inputbase .specificClass

推荐答案

不同的选项可以使用下面的命令：c $ c>< input /> ，没有设置答案

这将取决于你的代码，你的目标等，如何获得样式的各种元素。这里有一些可能性，每个都有优点和缺点。

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（您目前的工作）

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输出

CSS Output

.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（），如果它混合在多个实例中，这将产生很多额外的代码。这是您面对的问题。

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.

2。扩展课程

出现 LESS只是准备允许扩展mixins ，但是目前（LESS 1.5）这只需要一个类定义，因此：

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

.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输出

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

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

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.

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

3. Two Classes (extra html markup you propose)

这个解决方案你有两个类（这是因为你说你不总是想要 .inputbase 应用于输入元素）。

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

LESS和CSS输出 p>

LESS and CSS Output*

.inputbase {
  /* your base code */
}

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

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

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

b $ b

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

4。一个基本覆盖类

这可能比上述更好。

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

b $ b

如果大多数输入都有基本输入代码，你可以在 input 元素定义中简单定义基本输入代码， t想在你的特殊的css代码。这允许较少的html与只有单个类应用< input class =someInput/> 。这将保持CSS和HTML更少杂乱，但有缺点，记住基本代码是什么，并能够覆盖它，如果需要。

If most inputs will have the baseinput code, you can simply define your base input code within the input element 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.

最佳将取决于您面对的特定情况。但也许两个额外的选项将帮助你思考你的情况。我个人在大多数情况下会选择＃2或＃4，但同样有＃1和＃3的申请。

What will be best depends 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.

这篇关于LESS：更好地使用继承或多个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！