LESS: 更好的使用继承还是多个类？

Question

LESS: 更好的使用继承还是多个类？

cssless

42

我有一个包含inputbase(){}类的LESS文件，我在很多地方使用它，但并不是每种输入类型都用到。当我编译时，在输出的CSS文件中会有很多重复的样式。

我看了一下Bootstrap如何使用LESS来进行网格布局，他们采用了相同的方法;其中列1等会继承自列基类。同样，这似乎会生成很多CSS。

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

- MaxWillmott

2个回答

0

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

后来将讨论它是否是一个错误。不同的括号使用将产生不同的结果。还将有一个关于具有与类相同名称的mixin的问题，也请参见：https://github.com/less/less.js/issues/1437

- Bass Jobsen

1

抱歉，我觉得我没有解释清楚。我的意思是，我应该在一个元素上使用多个类还是使用一个大类。后者使用了LESS继承。 - MaxWillmott

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottS · Accepted Answer

各种选择，没有固定答案

如何为各个元素设置样式，很大程度上取决于您的代码、目标等因素。以下是一些可能性，每个选项都有其优点和缺点。

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

.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()中有超过一行或两行代码，并且在多个实例中混合使用，那么这将生成大量额外的代码。这是你遇到的问题。

2. 扩展类

看起来LESS即将允许扩展mixin，但目前（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 输出

.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输出的好方法。

3. 两个类（您提议的额外HTML标记）

您提出的这个解决方案具有两个类别（这是因为您表示您不总是希望将 ".inputbase" 应用于输入元素）。

LESS 和 CSS 输出*

.inputbase {
  /* your base code */
}

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

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

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

这种方法确实使用了最少的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 */
}

如果大多数输入都具有基本输入代码，则可以在元素定义中定义基本输入代码，然后仅覆盖您不希望出现在特殊CSS代码中的属性。这样可以使用单个应用了类的HTML较少 <input class="someInput" />。这将使CSS和HTML都保持简洁，但缺点是需要记住基本代码并在需要时能够覆盖它。

摘要

哪种方法最好取决于您所面临的具体情况。但也许这两个额外选项可以帮助您思考自己的案例。我个人在大多数情况下会选择#2或#4，但是#1和#3也有适用的场景。