CSS (таблица стилей) организация и цвета
Я только что закончил веб-сайт среднего размера, и одну вещь, которую я заметил в моей css-организации, было то, что у меня много жестко закодированных значений цвета повсюду. Очевидно, это не очень удобно для ремонтопригодности. Обычно, когда я разрабатываю сайт, я выбираю 3-5 основных цветов для темы. Я заканчиваю тем, что устанавливаю некоторые значения по умолчанию для абзацев, ссылок и т. д. В начале моего основного CSS, но некоторые компоненты изменят цвет (например, тег легенды) и потребуют, чтобы я изменил стиль с цветом, который я хотел. Как этого избежать? Я думал создать отдельные правила для каждого цвета и просто использовать их, когда мне нужно изменить стиль.
т.е.
.color1 {
color: #3d444d;
}
Ответы 13
У вас может быть файл colours.css, содержащий только цвета / изображения для каждого тега. Затем вы можете изменить цвета, просто заменив файл, или имея динамически сгенерированный файл CSS, или имея разные файлы CSS и выбирая их на основе URL-адреса веб-сайта / подпапки / свойства / и т. д.
Или вы можете использовать цветные теги во время написания, но тогда ваш HTML превратится в:
<p style = "body grey"> Бла </p>
В CSS должна быть функция, позволяющая определять значения для таких вещей, как цвета, которые должны быть согласованы с помощью стиля, но определены только в одном месте. Тем не менее, есть поиск и замена.
Итак, вы говорите, что не хотите возвращаться в свой CSS, чтобы изменить значения цвета, если вы найдете другую цветовую «тему», которая может работать лучше?
К сожалению, я не вижу другого выхода. CSS определяет стили, и, поскольку цвет является одним из них, единственный способ изменить его - это войти в CSS и изменить его.
Конечно, вы можете создать себе небольшую программу, которая позволит вам изменить файл css, выбрав цветовое колесо на веб-странице или что-то в этом роде, которое затем запишет это значение в файл css, используя объект файловой системы или что-то в этом роде, но это много работы наверняка больше, чем требуется.
Обычно лучше просто найти и заменить цвета, которые вы меняете.
Что-либо более мощное, чем это, будет более сложным с небольшими преимуществами.
Одна вещь, которую я сделал здесь, - это отделить мои объявления палитры от другой разметки стиля / макета, сгруппировав часто окрашенные элементы в списки, например
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
В предварительном просмотре предложение JeeBee является логическим продолжением этого: если имеет смысл обрабатывать ваши объявления цвета (и, конечно, это может относиться к другим проблемам стиля, хотя цвет имеет уникальные свойства, не изменяя макет), вы можете рассмотреть выталкивая его в отдельный файл css, да. Это также упрощает горячую замену тематических вариаций только для цвета, просто выбрав тот или иной профиль colorxxx.css в качестве включаемого.
Это именно то, что вам следует делать.
Чем более централизованным вы сможете сделать свой CSS, тем проще будет вносить изменения в будущем. И давайте будем серьезными, вам захочется сменить цвета в будущем.
Вы почти никогда не должны жестко закодировать CSS в свой html, он должен быть все в CSS.
Кроме того, что-то, что я начал делать чаще, - это накладывать ваши классы css друг на друга, чтобы было еще проще менять цвета один раз ... представлять везде.
Образец (случайный цвет) css:
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
Затем немного разметки, обратите внимание, как я использую слой цветов с другими классами, таким образом я могу просто изменить ОДИН класс css:
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
Помните ... встроенный css = bad (большую часть времени)
CSS - это не ваш ответ. Вы хотите изучить абстракцию поверх CSS, например SASS. Это позволит вам определять константы и в целом очищать ваш CSS.
Вот список CSS-фреймворки.
Я храню список всех использованных мною цветов в верхней части файла.
Когда CSS обслуживается серверным скриптом, например. PHP, обычно программисты создают CSS как файл шаблона и заменяют цвета во время выполнения. Это также может быть использовано, чтобы позволить пользователям выбирать цветовую модель.
Другой способ избежать синтаксического анализа этого файла каждый раз (хотя кеш должен позаботиться об этом) или просто, если у вас есть статический сайт, - создать такой шаблон и проанализировать его с помощью некоторого механизма сценариев / статических шаблонов перед загрузкой на сервер.
Поиск / замена могут работать, за исключением случаев, когда два изначально разных цвета оказываются одинаковыми: после этого их трудно снова разделить! :-)
Если я не ошибаюсь, CSS3 должен позволять такую параметризацию. Но я не буду задерживать дыхание, пока эта функция не будет доступна в 90% браузеров, просматривающих Интернет!
См .: Создайте переменную в файле .CSS для использования в этом файле .CSS.
Подводя итог, у вас есть три основных варианта:
- Используйте препроцессор макроса для замены постоянных названий цветов в таблицах стилей.
- Используйте клиентские сценарии для настройки стилей.
- Используйте одно правило для каждого цвета, перечисляя все селекторы, к которым оно должно применяться (мой любимый ...)
Возможно, вы поместите всю информацию о цвете в одну часть вашей таблицы стилей. Например, измените это:
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
к этому:
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
Иногда я использую PHP и делаю файл чем-то вроде style.css.php. Тогда вы можете сделать это:
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
Теперь вы можете использовать этот цвет где угодно, и менять его нужно только в одном месте. Это также работает и для других значений, кроме цветов.
это может быть отличной стратегией, которая упрощает gzip и сжатие вашего CSS (выходной буфер и пространство для регулярных выражений, комментарии и т. д.)
Мне нравится идея разделения информации о цвете в отдельный файл, независимо от того, как я это делаю. Я бы принял здесь несколько ответов, если бы мог, потому что мне тоже нравится Джош Миллард. Мне нравится идея иметь отдельные цветовые правила, потому что конкретный тег может иметь разные цвета в зависимости от того, где он встречается. Может быть, комбинация обоих этих методов будет хорошей:
h1, p, code {
color: #ff0000;
}
а затем также иметь
.color1 {
color: #ff0000;
}
когда вам нужно рестайлинг.
Здесь вам на помощь приходит SASS.
Проголосовали против ... использование названий цветов в классах - плохая практика, потому что на следующей неделе "серый" должен быть "синим", а вы застряли с плохим соглашением об именах.