CODEWITHSUNDEEP
css
Nitin
Nitin

Reputation: 1451

Is having a long CSS selector bad?

Is a selector like 

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

bad for performance? If yes how and if no why?

I Googled and read a lot of posts including the ones by Mozilla and couldn't find any mention of having a large number of class names as a selector being bad.

Upvotes: 6

Views: 1486

Answers (4)

Sven Kannenberg
Sven Kannenberg

Reputation: 869

You didn't choose a large selector, you just assigned many selectors to your stylesheet. A large selector would be for example:

header nav ul li a

As the browser uses selectors from right to left the key-selector (the last selector in line, in this example the anchor-element a) is too general. When beginning to render the style the browser begins to grab for all elements according to the key-selector, what would probably mean, that it got much more elements, as effectively needed. In this example it would be much better, if navigation items get unique classes, so the stylesheet must only be applied to following selector:

.primary-link

So, it's import the right key-selector for your styles, to reduce the rendering time to a minimum.

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

Upvotes: 0

sandeep
sandeep

Reputation: 92803

Saving a single bite is good. Yup as @dystroy said it's doesn't impact that much on your page performance but it's not a good coding particle & also it's hard to manage your code.

Write like this:

body{font-size:16px}

Upvotes: 2

naresh kumar
naresh kumar

Reputation: 2241

This is the valid syntax for assigning a common properties to multiple classes at a time. there is no down side effect.

Upvotes: 2

Denys Séguret
Denys Séguret

Reputation: 382194

No, there is no performance problem here.

What is bad is a long selector involving many checks but your selector is in fact a sequence of selectors, equivalent to 

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

Selectors with just a class are among the most efficient ones.

There's no real problem, even if you probably should have less classes in order to manage your code more easily.

Upvotes: 7

Related Questions