Can I use a kind of css variables? - html

Question

I'm trying to tidy all my css code on my site, I want to be able to be specific with the type. Let's say the type will be 20px, bold and blue e.g.
<h1 bold blue>Hello world</h1 blue bold>
So the css file will have:
h1 {
font-size:20px;
}
bold {
font-weight:bold:
}
blue {
color:blue;
}
Then as I go through my design process i can mix and match with colors and sizes etc. Is something like this possible?

Answer 1

this isn't possible exaclty like you want to, but what you can do is this:
<h1 bold blue>Hello world</h1 blue bold> // your idea
<h1 class="bold blue">Hello world</h1> // correct html, even slightly shorter
and
h1 {
font-size:20px;
}
.bold { // added . for being a class
font-weight:bold:
}
.blue { // added . for being a class
color:blue;
}
css-variables itself are possible when using something like lesscss, but this works in another way than the one you mentioned and your html-markup still has to be valid.
EDIT:
please note that, as edem (and others) said, using blue and bold as classnames in a real project isn't a good idea. i assumed you just gave this as short examples to ask for how to combine different "sets of css-rules" (read: classes). if thats not the case: stick to edems or tims explanation and take a look at guides for "semantical markup".

Answer 2

Colors rarely make good identifiers. Suppose "blue" is no longer blue? Maybe you want it to be red instead?
Font-weights ("bold" in your example) also are not good identifiers. Perhaps in the future you may prefer a font which looks better with a normal font-weight.
Determine the purpose of the style (e.g. article byline, or picture caption) and/or the semantic purpose of the element to which it is being applied, and name your styles accordingly.
You can then use a combination of classes (as others have mentioned) to achieve your desired goal.

Answer 3

This is against good practices. Let's say you have an article header type which can be found on any article page and a main header which is on every page:
.mainHeader {
font-size:20px;
font-weight:bold:
color:blue;
}
.articleHeader {
font-size:15px;
font-weight:bold:
color:red;
}
What if some day you decide that your article header won't be blue any more. If you change
.blue {
color:blue;
}
to
.blue {
color:red;
}
that wont'be good. You should name your classes/ids according to their semantical purpose.
The point is that CSS supposed to be succint so you can change the looks of your whole page with modification in 1-2 lines. The idea you present here is not succint therefore not considered a good practice.
I think you should use less css as the answer suggested above. By the way if you use some scripting language on your webpage like python or php you can use a template engine which supports inheritance and you can generate your own css code and you can use variables there. This simply does not fit in CSS alone.

Answer 4

Yes. Use classes.
<h1 class"bold blue">Hello world</h1>
h1 {font-size:20px;}
.bold {
font-weight:bold:
}
.blue {
color:blue;
}