Почему CSS не поддерживает константы?

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

span.class1 {
  color: #377fb6;
}

div.class2 {
  border: solid 1px #377fb6; /* Repeated color */
}

Интересно, почему такая простая простая функция никогда не попала в стандарт. Что может быть сложно в реализации схемы, в которой мы могли бы избежать повторения, примерно так:

$theme_color1: #377fb6;

span.class1 {
  color: $theme_color1;
}

div.class2 {
  border: solid 1px $theme_color1;
}

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

Ответ 1

Текущее состояние [обновление в декабре 2015 года]

W3C выпустил черновик о переменных CSS всего через месяц после того, как этот ответ был отредактирован в последний раз. И в этом месяце довел этот проект до рекомендации кандидата. Он останется в обзоре, по крайней мере, до июня 2016 года. Доступен набор тестов.

Итак, в целом, CSS будет иметь переменные, также называемые "custom properties" :

A настраиваемое свойство - это любое свойство, имя которого начинается с двух тире (U + 002D HYPHEN-MINUS), например --foo. <custom-property-name>производство соответствует этому: оно определяется как любой действительный идентификатор, начинающийся с двух тире. Пользовательские свойства предназначены исключительно для авторов и пользователей; CSS никогда не придаст им значения, кроме того, что представлено здесь.

Пример 1

Пользовательские свойства определяют переменные, ссылающиеся на нотацию var(), которая может использоваться для многих целей. Например, страница, которая последовательно использует небольшой набор цветов в своем дизайне, может сохранять цвета в пользовательских свойствах и использовать их с переменными:
:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}
Именование дает мнемонику для цветов, предотвращает непрозрачные опечатки в цветовых кодах, и, если цвета тембров меняются, фокусирует изменение на одном простом месте (значение пользовательского свойства), а не требует много редактирует все таблицы стилей на веб-странице.

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

Эта функция реализована только в Firefox и Chrome на данный момент, и она (вероятно) займет довольно много времени, пока она не будет реализована в текущие браузеры.

Старый ответ с 2012 года

Это оригинальный ответ с марта 2012 года. Он предваряет как "официальный" проект W3C, так и экспериментальные реализации браузера.

Почему переменные CSS не используются в CSS 1 или 2?

EDIT: Это уже было допрошено Håkon Wium Lie, отцу CSS (Opera Watchblog (машина Wayback)):

Берни Циммерманн: Håkon, почему CSS не поддерживает константы? Например, возможность присвоить значение RGB константе может упростить управление таблицами стилей. Это был просто недосмотр?

Хакон: Нет, мы думали об этом. Правда, он сохранил бы некоторую типизацию. Однако есть и некоторые недостатки. Во-первых, синтаксис CSS был бы более сложным и более похожим на программирование. Во-вторых, каков будет объем константы? Файл? Документ? Зачем? В конце концов мы решили, что это не стоит.

Так что это не в стандарте, потому что они думали, что это не стоит.

Обходные

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

Когда несколько селекторов используют одни и те же объявления, они могут быть сгруппированы в список, разделенный запятыми. ^{CSS2: группировка}

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

.header{
    color: red;
}
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}
.footer{
    color: blue;
    border: 1px solid blue;
}

использовать

/* Color definitions */
.header,
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}

.footer{
    color: blue;
}

/* border definitions */
.footer{
    border: 1px solid;
}

Также используйте наследование по возможности.

Обратите внимание, что вы можете объявить почти какую-то переменную, если используете абстрактные/простые классы, например

.margin5em{
    margin: 5em;
}
.corporateIdentityBackgroundColor{
    background-color: #881200;
}
.corporateIdentityBackgroundImage{
    background-image: url(we/are/awesome/corporation);
}
.backgroundCenter{
    background-position: center center;
}
.backgroundNoRepeat{
    background-repeat: no-repeat;
}

Это позволит вам использовать

<div class="corporateIdentityBackgroundImage backgroundCenter backgroundNoRepeat">Ridiculos long class names</div>
<div class="article">
  <p class="margin5em">Yesterday I found a new hobby: Creating class names that are longer then most common words.</p>
</div>

См. также:

http://icant.co.uk/articles/cssconstants/

Ответ 2

Ответ Zetas - это отличный результат - он, конечно же, получил мое преимущество, но я хотел отбросить заметку о рабочем проекте для "Переменные CSS" (константы с другим именем ) был опубликован всего десять дней назад:

http://dev.w3.org/csswg/css-variables/

Я бы не стал слишком разбираться в этом, так как я подозреваю, что он претерпит изменения, и настанет время, пока поддержка не будет широко распространена. Тем не менее, по крайней мере, это движение в этом направлении.

Ответ 3

почему не были введены константы CSS?

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

Ответ 4

Есть аргумент для цветовых констант (у нас уже есть несколько предопределенных цветовых констант). Однако переменные приводят к операторам If. Операторы If приводят к функциям. Функции приводят к Javascript (и doobies).

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

Я не вижу необходимости в других константах в хорошо спроектированном листе. Многочисленные повторения размеров указывают на плохую структуру/дизайн.