Geek Answers Handbook

Is it bad to have many classes in an HTML element?

In modern HTML coding, it is popular to add multiple class names to an element, such as

<div class="class1 class2 class3 class4 ..." </div>

This gives us great flexibility to mix CSS properties without repeating them for different classes.

Logically, browsers consume more resources to collect CSS properties from different classes to apply to the corresponding element.

Since it is difficult to provide a reliable guide on this issue, I ask this question from a theoretical point of view. Imagine that most of the HTML elements of a page have several classes (for example, 10 classes). Does this mean that the page looks more complex and slower? Is this moderation reasonable and significant?

In general, what is the general process of browsers for reading properties from different classes?

+4
source share
2 answers

The interest in adding many classes is to have separate classes for separate styles, rather than repeating / creating a new class for the same use.

For example, if I have a button, I can have 3 classes, for example .btn .big .grey . If I want to create another button, I only need to repeat the .btn class and add other custom classes, such as .medium and .green . It is called OOCSS (CSS Oriented Object).

Regarding performance, I recommend that you look at this small example http://www.css-101.org/descendant-selector/go_fetch_yourself.php , http://csswizardry.com/2011/09/writing-efficient-css-selectors and you can find many performance articles on ids vs classes.

0
source

Several classes can make it easier to add special effects to elements without having to create a completely new style for this element. For example, you might want to quickly move items left or right. You can write two classes: "left" and "right" with "float: left"; and "float: right;" in them. Then whenever you have an element, you need to swim to the left, you just add the class "left" to its list of classes.

I like to use several classes for the things that I want to keep standard for the whole site. For example, if I always need a bottom edge for elements that need a bottom edge of 10 pixels. By creating a class that covers only the bot mark: 10px; I can add it where necessary.

Disadvantages of several classes

While they are supported in major browsers, really old browsers do not support them. Therefore, you must make sure that the first class you list is the one that has the most specific information for this element.

Several classes can also become really confusing as you apply more and more to an element.

More details ...

Summary:

  • Reduce the total number of selectors (including IE related styles: .ie7 .foo.bar)
  • Avoid generic selectors (including unqualified attribute selectors: [Type = "URL"])
  • Increasing the page affects CSS performance in some browsers (e.g. Opera).
  • Window size affects CSS performance in some browsers (e.g. Chrome).
  • Page reloading can adversely affect CSS performance in some browsers (e.g. Opera)
  • "border-radius" and "transform" are some of the most expensive properties (at least in WebKit and Opera)
  • The Timeline tab in WebKit-based browsers can shed light on the general recalc / reflow / repaint times
  • WebKit selection compatibility is much faster

http://perfectionkills.com/

0
source

More articles:


All Articles