CSS организация и цвета

Question

Я только что закончил веб-сайт среднего размера, и одна вещь, которую я заметил в своей организации CSS, это то, что у меня много жестко закодированных значений цвета повсюду. Это явно не очень хорошо для удобства обслуживания. Обычно при разработке сайта я выбираю 3-5 основных цветов для темы. Я заканчиваю тем, что устанавливаю некоторые значения по умолчанию для абзацев, ссылок и т. Д. В начале моего основного CSS, но некоторые компоненты меняют цвет (например, тег легенда) и требуют, чтобы я изменил цвет на нужный мне. Как вы этого избегаете? Я думал о создании отдельных правил для каждого цвета и просто использовал их, когда мне нужно изменить стиль.

т.е.

.color1 {
    color: #3d444d;
}

Answer 1

То есть вы говорите, что не хотите возвращаться в свой CSS для изменения значений цвета, если найдете другую цветовую «тему», которая может работать лучше?

К сожалению, я не вижу способа обойти это. CSS определяет стили, и если цвет является одним из них, единственный способ изменить его - это зайти в css и изменить его.

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

Answer 2

У вас может быть файл colours.css, содержащий только цвета / изображения для каждого тега. Затем вы можете изменить цвета, просто заменив файл, или с помощью динамически сгенерированного файла CSS, или имея доступ к другим файлам CSS и выбрав их в зависимости от URL / вложенной папки / свойства сайта / т. Д.

Или вы можете иметь цветные теги, когда пишете, но тогда ваш HTML превращается в:

Бла

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