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

Question

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

В принципе, в то время как разработчики front-end этого проекта отвечают за реализацию CSS, дизайнер хочет иметь возможность вводить разные «темы» для сайта.

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

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

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

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

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

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

Любые мысли о pro/con от этого?

Answer 1

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

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

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

Вы могли бы быть заинтересованы в проверке из LESS:

@brand_color: #4D926F; 

#header { 
    color: @brand_color; 
} 

h2 { 
    color: @brand_color; 
} 

Answer 2

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

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

Answer 3

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

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

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

Edit:

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

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

Answer 4

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