Есть ли способ ссылаться на значения как «переменные» в CSS?

Question

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

Очевидно, что это невозможно сделать идеально. Я умираю немного внутри каждый раз, когда мне нужно добавить дополнительный вложенный div с единственной целью заставить работать макет.

Самая последняя проблема, которую я пытался решить, - это как уменьшить количество дублирующегося текста в моем файле .css. Главное это цвета. Во всем приложении я использую цвета для обозначения «чистых», «ошибок», «предупреждений» и «помилованных», и до сих пор практически во всех местах, где используются цвета, их необходимо явно определять. Иногда они используются для цветов текста, иногда цветов фона, иногда цветов границы.

Есть ли способ присвоить имя имени, например цвет, а затем ссылаться на это имя в свойствах CSS?

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

Бонусный вопрос: Какова лучшая практика для такого рода вещей? Я глуп, пытаясь заставить HTML + CSS вести себя как MVC, когда он не готов это сделать? Я знаю, что это направление, в котором CSS всегда двигался, но, возможно, его пока нет.

Answer 1

Почему да, для этого есть недавно введенные переменные css !

К сожалению ... он еще не попал в браузеры, поэтому вы пока не можете их использовать.

Чтобы получить такое же поведение, вам нужно будет использовать какой-нибудь язык на стороне сервера для динамического вывода цвета в ваши CSS-файлы. (Вы также можете использовать тонну JavaScript, но это было бы ужасно)

Итак, в PHP вы можете сделать это:

styles.php---------------------
<?php
$warningColor = "#f00";
?>

.warning {
     color: <?=$warningColor?>;
}
.error {
     color: <?=$warningColor?>;
}

index.html----------------------

<link rel="stylesheet" src="styles.php" />

Answer 2

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

Answer 3

Я только что обнаружил это (упоминается в подкасте StackExchange): http://lesscss.org/

Это JavaScript, который позволяет вам помещать переменные (и другие возможности) в ваш CSS.

Answer 4

Я не уверен, что полностью понимаю вашу проблему, но вы можете рассмотреть вопрос о назначении определенного класса для цвета. Например, если весь текст / divs / etc для «предупреждения» ярко-красный, вы можете сделать это в вашем css:

.warning { color: #f00; }

И затем, когда у вас есть div, даже если у него уже есть дополнительные классы, вы просто добавляете этот класс, разделяя пробел:

<div class="message warning">Invalid username.</div>

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

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

Answer 5

Другое возможное решение - включить несколько определений для каждого стиля ...

.error{ text-decoration: underline; font-weight: bolder}

.cancelled{ text-decoration: line-through; font-style: italic;}

.warning{font-weight: bold}

.comment{font-size: smaller; font-style: italic}
.
.
.

.error, .cancelled { color: red };

.warning, .comment {color: green};

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

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

Подход на стороне сервера, упомянутый @Bob и Tom Ritter, также заслуживает рассмотрения, но, как и в случае с подходом, который я предлагаю, подвержен проблемам с кэшированием.

Answer 6

Если вы не хотите или не имеете доступа к сценариям на стороне сервера, одним из обходных путей будет использование Javascript на клиенте. Просто что-то с document.write () сделает свое дело. Единственная проблема - разрывы строк ...

<script type="text/javascript">
<!--
var sColor = "#f0000";
var myCSS = ".red {" +
             "    color: " + sColor+
              "}" +
             ".error { " +
                  color: " + sColor +
             "}";

document.write(myCSS);
-->
</script>

Не слишком неудобно для записи или чтения (ИМХО) и достаточно просто для поддержки ... Лично я бы предпочел язык на стороне сервера. Таким образом вы полностью контролируете происходящее. Или, по крайней мере, немного больше. ; -)

Answer 7

Невозможно сделать это с простым HTML и CSS.

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

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

Answer 8

Да - это называется jQuery. Используйте JavaScript и хорошую библиотеку JavaScript (jQuery отлично) и управляйте тем, что вам нужно, таким образом.

Answer 9

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

Например, если вы использовали C #, вы бы ссылались на переменные, используя блок скрипта

width: <%= Width %>