I've heard that having really long selectors in your CSS makes your page rendering slow.
Since I'm used to using SASS, so I always end up having really long selectors. Something like this:
.parent .child .element .child .child2 .child3 .child4 .child5{
...
}
Is it true that long selectors make rendering slow? and are there any ways to avoid this from happening?
In really large codebases, long CSS selector do affect your site's performance. To prevent this from happening, it's important to write selectors that are specific enough, but not too specific.
Have a look at csswizardry.com/2011/09/writing-efficient-css-sel… where Harry Roberts explains this in full detail.
yes,first of all CSS file size will increase
DominikAngerer
I'm Dominik Angerer, a Web-Developer at and Founder of Storyblok from Austria with an eye for the detail and performance as well.
Sharon Chaisky - Stephan de Vries actually references a good article. We at Storyblok following the BEM Methodology to reduce such long selectors and so every component can be reused everywhere :) without any strange behavior.
In Short:
.block { } .block__element { } .block--modifier { }Real Live example on our website would be the console:
.console { } .console__comment { } .console__line { } .console--light {} .console--dark {}