Do long CSS class names have an effect on performance?

Question

I am building a JS script with a theme included, in order to run multiple themes each classname has a prefix - this however makes the classnames somewhat long.

I also have CSS rules depending on wether or not the element has more classnames in order to provide special effects.

My question is will longer CSS classnames have an effect on performance, or will only wrong/faulty/inefficient use of selectors slow down performance?

Answer 1

Long class names will definitely have an impact on performance. For one, there will be more stuff to be transferred and parsed. Will they have a measurable impact however? Probably not. The transfer only happens once, thanks to caching and the impact on parsing will likely be negligible compared to for instance rendering.

In general, you should only start thinking about such performance optimizations if you start running into performance problems. Its better to use expressive names to improve readability of your css (the same goes for any kind of code) before optimizing for possible performance issues.

For selectors, they will likely have a higher impact on performance, as depending on the complexity of a selector and the size of your DOM, a considerable (considerable compared to long class names) amount of code might have to be executed. However, again try to make the most readable/understandable selector and only start optimizing it if there is a measurable performance impact (you can use firebug or chrome's developer tools for profiling).

Answer 2

will longer CSS classnames have an effect on performance, or will only wrong/faulty/inefficient use of selectors slow down performance?

longer classnames? - I don't think it matters, I prefer shorter but with some applications or plugins it's not possible - PageSpeed and Y!Slow nor any other performance recommendation sites I've visited, mention the length of classname as being an issue - But definitely the more efficient the whole selector, the better the performance