Menu
Is there any performance gain in using single css class vs multiples on an element?
Ex:-
<div class="single-class"></div>
vs
<div class="no-padding no-margin some-class some-other-class"></div>
898
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
An element is usually only assigned one class. The corresponding CSS for that particular class defines the appearance properties for that class. However, we can also assign multiple classes to the same element in CSS.
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.
Absolutely, divs can have more than one class and with some Bootstrap components you'll often need to have multiple classes for them to function as you want them to. Applying multiple classes of course is possible outside of bootstrap as well. All you have to do is separate each class with a space.
One or More Classes in CSS? In most cases, you assign a single class attribute to an element, but you actually aren't limited to just one class they way you are with IDs.
Reference it in css like so: To add multiple class in the same element you can use the following format: Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example: If you have 2 classes i.e. .indent and .font, class="indent font" works.
Layering several classes can make it easier to add special effects to elements without having to create a whole new style for that element. For example, to float elements to the left or right, you might write two classes: in them. Then, whenever you had an element you need to float left, you would simply add the class "left" to its class list.
If you have 2 classes i.e. .indent and .font, class="indent font" works. You dont have to have a .indent.font{} in css. You can have the classes separate in css and still call both just using the class="class1 class2" in the html. You just need a space between one or more class names.
If you have an even moderately complex stylesheet and know what you're doing, using multiple classes has the benefit of taking full advantage of the cascade, which in the end most likely means that your css files will be smaller as you won't be duplicating code. So, in this sense, it actually has a positive impact on performance (dependent on the complexity of your css).
I'm trying to imagine what the jQuery UI stylesheet would look like if it used a one-class-per-element approach. I imagine it would double in size.
Of course like everyone said, the impact is so small you won't notice. Continue your use of multiple classes and embrace the cascade!
FWIW, I really don't like class names like no-padding, float-left and ui-corner-all. Though they make sense to the css author, a semantic approach combined with multiple elements per declaration (to avoid duplicating rules) is almost always preferred. Using the first method, your css will make no sense if you decide that no-padding actually needs 1px padding, and that a.classname.float-left actually needs to float right.
75
Technically, yes fewer classes mean less data transfer for HTML. As far as CSS is concerned, each element needs to be checked against each rule, so fewer classes may mean less matching depending on the rules you have written.
The difference is so small that it's not easily noticeable. You may notice the performance difference if you're populating a page with tens of thousands of elements, but that would be a poor design choice anyway.
One concern I have is with the example you've provided. Your classes no-padding, no-margin are descriptive of styles which are a bad idea. If all your some-class elements also have the no-margin class, then margin: 0 should be part of the some-class rule.
Don't add classes for styles, add styles for classes.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
