CODEWITHSUNDEEP
css
user1677543
user1677543

Reputation:

CSS Classes vs Grouped IDs Performance

Searched for this high and low. I am quite familiar with CSS classes vs ids (vs selectors) performance, as there is lots of literature, including in these forums regarding this topic.

I would like to ask whether it is better to use a CSS class or group ids, either for performance or any other advantage.

Example;

The HTML;

<p class="para-format">You know something?</p>
<p class="para-format">This is just as good</p>
    ....
<p class="para-format">The last paragraph</p>

vs

<p id="para-format-01">You know something?</p>
<p id="para-format-02">This is just as good</p>
    ....
<p id="para-format-0n">The last paragraph</p>

The CSS;

.para-format {color: #000000; margin: 0 auto; ...}

vs

#para-format-01, #para-format-02, ..., #para-format-0n {color: #000000; margin: 0 auto; ...}

I know this isn't the best example for what I'm asking.

Thanks and regards, - BotRot

Upvotes: 0

Views: 192

Answers (1)

Maloric
Maloric

Reputation: 5625

There is no measurable difference between the two, and since the purpose of a class is to duplicate the same style over multiple elements, it is semantically better to use a class. The only case where you should be overly concerned about the difference between the two is when using javascript to select elements by ID or class name, and even then only when we are talking about hundreds of elements. If you ever get to that point then the negligible performance benefit you gain is offset by all the extra kilobytes in your stylesheet that marginally increase load times. Neither case is going to impact performance massively, but one if likely to give you a migraine just looking at it.

For your own sanity, use classes so you don't have to update your css selector whenever you add a new element.

Upvotes: 2

Related Questions