Могу ли я использовать переменные css?

Question

Я пытаюсь привести в порядок весь мой код css на моем сайте, я хочу быть в состоянии быть конкретным с типом. Предположим, что тип будет 20 пикселей, полужирный и синий, например.

<h1 bold blue>Hello world</h1 blue bold> 

Так файл CSS будет:

h1 { 
font-size:20px; 
} 

bold { 
font-weight:bold: 
} 

blue { 
color:blue; 
} 

Тогда как я иду через мой процесс проектирования я могу смешивать и сочетать с цветами и размерами и т.д. Что-то вроде это возможно?

Answer 1

это невозможно exaclty, как вы хотите, но то, что вы можете сделать это:

<h1 bold blue>Hello world</h1 blue bold> // your idea 
<h1 class="bold blue">Hello world</h1> // correct html, even slightly shorter 

и

h1 { 
    font-size:20px; 
} 

.bold {         // added . for being a class 
    font-weight:bold: 
} 

.blue {         // added . for being a class 
    color:blue; 
} 

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

EDIT:
обратите внимание, что, как edem (and others) said, используя blue и bold, как в названий класса реального проекта не является хорошей идеей. Я предположил, что вы просто дали это в качестве кратких примеров, чтобы спросить, как объединить разные «наборы css-правил» (read: classes). если это не так: придерживайтесь edems или tims explanation и посмотрите руководства для «семантической разметки».

Answer 2

Да. Используйте классы.

<h1 class"bold blue">Hello world</h1> 

h1 {font-size:20px;} 

.bold { 
    font-weight:bold: 
} 

.blue { 
    color:blue; 
} 

Answer 3

Цвета редко делают хорошие идентификаторы. Предположим, что «синий» больше не синий? Может быть, вы хотите, чтобы он был красным?

Шрифт-вес («жирный» в вашем примере) также не являются хорошими идентификаторами. Возможно, в будущем вы можете предпочесть шрифт, который выглядит лучше с нормальным шрифтом.

Определите цель стиля (например, статью по строке или надписи на картинке) и/или семантическую цель элемента, к которому он применяется, и соответствующим образом назовите свои стили.

Затем вы можете использовать комбинацию классов (как упоминалось выше) для достижения желаемой цели.

Answer 4

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

.mainHeader { 
    font-size:20px; 
    font-weight:bold: 
    color:blue; 
} 

.articleHeader { 
    font-size:15px; 
    font-weight:bold: 
    color:red; 
} 

Что делать, если в один прекрасный день вы решили, что ваш заголовок статьи не будет синим больше , Если изменить

.blue { 
    color:blue; 
} 

в

.blue { 
    color:red; 
} 

что wont'be хорошо. Вы должны называть свои классы/идентификаторы в соответствии с их семантической целью.

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

Я думаю, вы должны использовать less css как ответ, предложенный выше. Кстати, если вы используете какой-то язык сценариев на своей веб-странице, например python или php, вы можете использовать механизм шаблонов, который поддерживает наследование, и вы можете создать свой собственный код css, и вы можете использовать переменные там. Это просто не вписывается в CSS.