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”.