Каковы преимущества и недостатки CSS-переменных?

Question

Я столкнулся с бизнес-требованием, которое, по моему мнению, может быть решено путем внедрения переменных CSS.

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

Меняя одну тему на другую, можно внести ряд изменений (таких как размер шрифта, цвет шрифта, ширина рамки и т. Д.), Не меняя слишком много кода.

В настоящее время мы пытаемся удовлетворить это требование, разделив стили компонентов на разные файлы CSS - например, один для макета, один для типографии, один для цветов и т. д.

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

Я надеюсь вместо этого ввести стандартный набор «переменных», который можно привязать к определенной теме.

CSS будет предварительно обработан, а переменные будут заменены на фактическое значение в зависимости от используемой темы.

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

Есть какие-нибудь мысли о плюсах / минусах этого?

Answer 1

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

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

Кроме этого, я думаю, это должно быть все преимущества.

Возможно, вам будет интересно проверить МЕНЬШЕ :

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

Answer 2

Я не вижу каких-либо улучшений по сравнению с наличием разных css-файлов для тем: вы говорите, что просто добавляете некоторые переменные для изменения шрифтов, цветов и тому подобного. А как насчет границ, выравнивания и многих других вещей? Темы - это не просто 2-3 цветовые переменные. Тема для большой веб-страницы может иметь довольно большие размеры, и разные темы для одной и той же страницы могут отличаться не только несколькими цветовыми кодами. Я не думаю, что это хорошая идея. Пусть дизайнеры внешнего интерфейса просто создают различные css-файлы для тем и загружают css-файлы, принадлежащие теме.

Answer 3

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

Конкретная проблема, которую я мог предвидеть, заключается в том, что разработчики могут иметь редакторы / IDE, которые знают, как работать с CSS, но не знают, как работать с вашим диалектом CSS. Это может немного ограничить разработчиков.

Но на самом деле - дело не в том, чтобы перечислять плюсы и минусы. Дело в том, что вы переезжаете на неизведанную территорию, и это - из принципа - плохая идея, если это не ваш основной бизнес.

Edit:

Я просто хотел бы немного умерить свой ответ. С технической точки зрения это может быть хорошей идеей - в зависимости от того, насколько хорошо вы управляете своей средой, насколько вы способны отслеживать свои шаги и многое другое. По сути, это тип внешнего DSL, который может быть очень мощным инструментом. Я не думаю, что применил бы это здесь, так как вы нацелены (на внешний интерфейс) разработчиков, и я думаю, что внешние DSL лучше использовать для администраторов / не разработчиков. Но это может быть успешно использовано.

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

Answer 4

Предварительная обработка CSS кажется хорошей идеей. Недостаток, который я вижу, состоит в том, что эта дополнительная абстракция повлечет за собой собственные проблемы - ошибки в коде обработки могут привести к неверному или глючному CSS Сверхурочные вещи могут быть трудно поддерживать.

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