CODEWITHSUNDEEP
css
Eric Brockman
Eric Brockman

Reputation: 854

Multiple classes in markup - will it slow down performance?

So I'm working on a site for a major hotel chain and in the css they have a preexisting class for every imaginable situation.

I'm editing a page, adding over 100

instances with the code:

<p class="pad-b10 pad-t15 margin-b5 border-bottom-black">

Which applies a 10px padding to the bottom, a 15px padding to the top, a 5px margin to the bottom and a black border underneath.

My question is, does it make more sense to create one class that has all of these parameters included? I don't see very many custom classes in the rest of the css.

Thanks

Upvotes: 1

Views: 1965

Answers (2)

Giacomo1968
Giacomo1968

Reputation: 26024

I would highly recommend cleaning up that CSS the way you describe—in more consolidated classes—without hesitation. That CSS you inherited seems terribly limiting. But I don’t think it would slow down the page as much as drive anyone debugging the mess nuts! Which is a valid concern.

EDIT: It’s also like to add that naming classes based on position & height (pad-b10, pad-t15, margin-b5 & such) is basically as bad as hardcoding inline CSS. Rework the CSS so thinks make sense semantically. And there has to be a common pattern so adapt to that. But CSS like that makes me ill.

Upvotes: 1

Raja Asthana
Raja Asthana

Reputation: 2110

In Mozilla's implementation (and probably others as well), for each element, the CSS engine searches through style rules to find a match. The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)

In this scenario its very much worthy to have single style element so that the browser need to search only one key(css class name) which inturn increases the performance.

Upvotes: 4

Related Questions