CODEWITHSUNDEEP
htmlcssperformancestylesheet
user1569021
user1569021

Reputation:

A lot of CSS classes on element vs one specific class?

I'm curious to know which way is 'best' performance wise, think of this simple general example, I wish to have an element which contains text, to be bold underlined and blue of colour.

I can use this way: 

<p class="bold underlined blue">Happy little clouds</p>

or

<p class="bold-underlined-blue">Happy little trees</p>

The first would obviously produce more classes, but the ultimate re-use of these classes seems to be better than making the one very specific class, but again on the other hand, producing more classes, I presume this would have performance implications.

Upvotes: 3

Views: 1651

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

The former approach (using multiple classes) is definitely better. Not only can you style the elements individually with:

.bold {
  font-weight: bold;
}

.underlined {
  text-decoration: underline;
}

.blue {
  color: blue;
}

But you can also style them for specific combination with each other such as:

.bold.underlined.blue {
  font-size: 18px;
}

In the above example, the font-size will only be applied if the corresponding element has all three classes, which would essentially be the same as the latter method in itself :)

Not only does using specialised classes give you more versatility, but it is also faster -- as you are likely to reuse styles like font-weight: bold multiple times throughout your document, a dedicated class means that you will only have to write the declaration once, rather than having to write it in each individual selector.

However, these specialised classes should only be created for things that you will reuse multiple times -- creating a specialised class for something that is only used once would be redundant.

Hope this helps!

Upvotes: 2

Related Questions