Does a long CSS selector have a bad one?

Question

Is a selector like

.a, .b, .c, .d, .e, .f, .g, .h, ......... , .zzzzz {font-size:16px} 

Bad for performance? If so, how and if not, why?

I googled and read a lot of posts, including Mozilla, and could not find a mention that a large number of class names is a poor selector.

Answer 1

No, there is no performance issue here.

What's bad is a long selector involving many checks, but your selector is actually a sequence of selectors equivalent to

  .a {font-size:16px} .b {font-size:16px} ... 

Class selectors are among the most efficient.

There is no real problem, even if you probably should have fewer classes to make it easier to manage your code.

Answer 2

This is valid syntax for assigning shared properties to multiple classes at a time. no side effect.

Answer 3

Saving one bite is good. Yup, as @dystroy said, doesn’t affect the performance of your page much, but it’s not a good coding particle, and it’s also difficult to manage your code.

Write like this:

 body{font-size:16px} 

Answer 4

You did not select a large selector, you just assigned many selectors to your stylesheet. For example, a large selector would look like this:

 header nav ul li a 

Since the browser uses a right-to-left selector, the selector key (the last selector on the line, in this example, the anchor element a) is too general. When you start to visualize the style that the browser starts capturing for all elements according to the selector key, which will probably mean that it receives a lot more elements as needed. In this example, it would be much better if the navigation elements get unique classes, so the stylesheet should only apply to the following selector:

 .primary-link 

In this way, it imports the right key selector for your styles to reduce rendering time to a minimum.

If you want to read something interesting about CSS selectors and performance, I can recommend this page: http://learn.shayhowe.com/advanced-html-css/performance-organization