Ответ 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.