I wasn't aware of performance implications for using :not, but it makes sense now.
What if you use :not with a specific selector, is it still expensive?
For instance, #toybox .teddy-bear:not('.blue')
I would expect this first selects all teddy bears inside the toybox, and then filters out the teddy bears that are blue. That makes sense, doesn't it?
But if it worked in reverse, looking through the entire DOM house for objects that are not blue, and then filtering for not blue objects that are teddy bears inside the toybox, it would be expensive indeed.
Human read CSS form left-to-right because it makes sense in our world (I need to open the toybox first to search for teddy-bear). But browsers do the opposite.
In practice (recent browser and computer), it need a huge DOM for this to matter. Keep your CSS clarity first, then think about perfs. Again, CSS is a pain to maintain, write it as clear as possible !
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I wasn't aware of performance implications for using :not, but it makes sense now.
What if you use :not with a specific selector, is it still expensive?
For instance,
#toybox .teddy-bear:not('.blue')I would expect this first selects all teddy bears inside the toybox, and then filters out the teddy bears that are blue. That makes sense, doesn't it?
But if it worked in reverse, looking through the entire DOM house for objects that are not blue, and then filtering for not blue objects that are teddy bears inside the toybox, it would be expensive indeed.
I'm not a Chrome engineer, but there's a lot of article about rendering online.
Human read CSS form left-to-right because it makes sense in our world (I need to open the toybox first to search for teddy-bear). But browsers do the opposite.
In practice (recent browser and computer), it need a huge DOM for this to matter. Keep your CSS clarity first, then think about perfs. Again, CSS is a pain to maintain, write it as clear as possible !