Как лучше организовать стили на less для поддержки разных цветовых решений интерфейса?

Question

[BANTIK]

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

Мне видится два пути:
1. Для каждого элемента определить персональную переменную с цветом, исходя из контекста элемента (например @loginFormBg, @SerachButtonTextColor) и потом просто для каждой темы указать нужные цвета для этих переменных.
Но тут есть явный минус в виде огромного кол-ва переменных, которые зачастую будут содержать одни и те же цветовые значения.
2. Вынести в название переменной идентификатор темы, а внутри каждого класса сделать фактически if, который в зависимости от идентификатора темы будет использовать нужное значение.

.sidebar {
    width: 220px;
    margin: 10px 0;
    & when (@theme = default) {background: @black;}
    & when (@theme = fireCat) {background: @fc_red;}
}

3. Третий вариант в виде расширения существующих классов в отдельном файле темы не рассматриваю, т.к.
во-первых, получу кучу дублирования в названиях классов и, как следствие, увеличение размера css,
во-вторых, нарушу структуру кода.

Есть ли какие-то еще красивые решения?

Comments

[liubko]

A что вы думаете о inline-styles?
Например material-ui.com перешли на inline-styles. Здесь можно посмотреть как они разобрались с проблемой тем https://github.com/callemall/material-ui/tree/mast...

Answer 1

[sim3x]

3

.blah{}

body.theme1{
   .blah{}

}

Comments

[BANTIK]

Когда это .blah - это норм, а если у вас для 5-ти разных классов задается один стиль, да еще каждый из этих 5-ти выглядит примерно так ".page-sidebar-minified .sidebar .nav > li.has-sub.active > a", то ваш вариант скомпилится в колоссальный объем кода...
P.S. Длинные селекторы - зло, но так уже есть, потому вариант перейти на БЭМ не подойдет.

[sim3x]

BANTIK:
сравни с вариантом загружать тему, размером с основной файл стилей

[BANTIK]

sim3x: Ну в первых 2-ух вариантах как раз в итоге все компилится в "чистый" и "легкий" css. Вся тяжесть то остается в less.

[sim3x]

BANTIK:
>"чистый"
ты используешь лесс, как раз для того чтоб тебе было пофиг на чистоту цсс
>"легкий"
еще раз
1, 2 вариант приведут к формированию трех файлов, одинакового размера, которые необходимо будет загружать полностью
Если у тебя нет проблем с дозагрузкой 100кб - то все ок
Если же тебе не чужда оптимизация по размерам, то выбирай 3

[BANTIK]

sim3x: Почему же трех файлов? Я же не буду подключать одновременно три темы. Да, я скомпилю три "чистых" файла, но подключать-то буду всегда только один из них...