The effect of applying a CSS class name that is not

Question

Does this adversely affect browser performance to assign a class name to the css class attribute of an element if the class has never been defined?

It is unusual to use class names for selectors with jQuery. I usually use a class that is used only to select items and never defines a class anywhere.

I assume most browsers will look for a css class definition, and could you somehow shorten the search if the style were defined?

I understand that css styles are compiled together before the page elements are displayed. This is why it is important to keep all CSS definitions together, rather than sharing them with script tags, as this causes most browsers to recompile CSS every time they mix with other definitions. The consequences of this can be serious enough for the page to display before applying the style.

However, in practice, I would suggest that the performance difference between the definition or absence of a CSS class definition is negligible, if any.

Answer 1

The easiest way to think about this is to remember that CSS applies to HTML, not to HTML that invokes the CSS selector.

When the browser parses the CSS file, it reads the selector from right to left to see where to apply the styles. For example ..foo ul {} will check all ul tags on the page and then check if they are contained in the .foo file. Since it is parsed this way, additional, unused classes in your HTML don't matter. It only checks identifiers and classes specified in CSS.

Answer 2

Since the class attribute is an HTML attribute, it can be inserted without problems if it is not called by CSS or Javascript. He can sit there quite happily on his own without side effects. It does not need to be selected using CSS, it can only be used by JS.

This article can help you understand more:

class (HTML attribute) @ sitepoint.com