3 ms·
I like how readable it is, but nesting selectors: .parent .child .element { is bad for performance — thus BEM's: .parent--child__element {
by ilikescience 11y ago
I like how readable it is, but nesting selectors:
.parent .child .element {
is bad for performance — thus BEM's:
.parent--child__element {
- Raphmedia 11y agoBut that would require you to modify the markup. It would also stops you from having general styles declarations. You couldn't do .button{color:red;border: 1px solid white;} and then .box>.button{width:100%;} unless you make your markup <span class="button pricebox--box__button"> and that would be pretty ugly, wouldn't it? Correct me if I am wrong.
- atirip 11y agoThat information is outdated. CSS speed optimisation is a complete waste of time for at least 5 years now.
- MatekCopatek 11y agoIt's not as bad because of decreased performance (which is negligible) as it is because of increased specificity, which has bigger day-to-day implications in large apps.
- onion2k 11y agoIf your CSS performance is slow then you certainly have some terrible UX problems as well. You can't fill up the DOM to the extent that the browser slows down when it's rendering things and still have a usable website. Fix the UX and the CSS performance will magically fix itself.
- elros 11y agoDon't you mean .parent__child-element { ?
- armandososa 11y agoIn this case it's .parent>.child>.element.