МЕНЬШЕ: лучше использовать наследование или несколько классов

У меня есть LESS файл с классом inputbase(){}. Я использую его много, но не каждый тип ввода. Когда я компилирую, у меня много повторяющихся стилей в выведенном файле CSS.

Я посмотрел, как bootstrap использует LESS для своей сетки, и они используют один и тот же подход; где column 1 etc наследуется от базового класса column. Снова это, похоже, создает много CSS.

Должен ли я использовать .inputbase .specificClass в каждом <input /> вместо использования LESS-наследования?

Ответ 1

Различные параметры, нет ответа на задание

Это будет зависеть от вашего кода, ваших целей и т.д., как вы получите стили для различных элементов. Вот некоторые возможности, каждая из которых имеет сильные и слабые стороны.

1. Mixin (что вы сейчас делаете)

МЕНЬШЕ

.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. Расширить класс

Он выглядит МЕНЬШЕ только готов к расширению mixins, но в настоящее время (LESS 1.5) для этого требуется просто определение класса, поэтому это:

МЕНЬШЕ

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

Если у большинства входов будет код baseinput, вы можете просто определить свой базовый код ввода в определении элемента input, а затем просто переопределить свойства, которые не нужны в вашем специальном коде css. Это позволяет использовать меньше html только с одним классом <input class="someInput" />. Это приведет к тому, что CSS и HTML будут менее загромождены, но имеет недостаток, чтобы помнить, что такое базовый код, и, если необходимо, переопределить его.

Резюме

То, что будет лучше, слишком сильно зависит от конкретных обстоятельств, с которыми вы сталкиваетесь. Но, возможно, два дополнительных варианта помогут вам продумать ваше дело. Я лично в большинстве случаев выбираю # 2 или # 4, но опять же, есть приложения для # 1 и # 3.

Ответ 2

В первую очередь это зависит от версии Less, которую вы используете. Посмотрите https://github.com/twbs/bootstrap/issues/8947. Сначала он был идентифицирован как ошибка. В этом случае вы можете выбрать "Подождать" исправления ошибки или изменить свой код.

Позже он будет обсуждаться, если это ошибка или нет. Различное использование скобок даст разные результаты. Также будет вопрос о mixins с тем же именем, что и классы, см. Также: https://github.com/less/less.js/issues/1437