4 ms·

So actually reading the post now: > People even used to use * { margin: 0 } which is totally overkill and not great for performance. Wait why would that be ba

So actually reading the post now: > People even used to use * { margin: 0 } which is totally overkill and not great for performance. Wait why would that be bad for performance? Zero margins should be just as fast as 8px margins, and if you have this style in the head section it's not like the browser will have to relayout a bunch of stuff.

enkrs 5y ago
The argument on performance comes from the idea that theoretically the rules are applied in order. So the browser has built in stylesheet of 8px, and after that a margin of 0 is calculated. (And after that, some more specific margin in the stylesheet is recalculated) Basically * { margin: anything } adds one extra calculation to each element in the page. Not sure if the performace hit is measurable tough, knowing how much optimization goes into browser engines.
csnover 5y ago
The universal selector has the potential to be slower than other selectors in naïve CSS engines because CSS works by matching selectors from the right to the left. A rule like `.baz *` matches every element on the page (vs something like `.baz .foo` which only matches elements with `.foo`). The match is only rejected after walking up the DOM tree to the root node to see if any parent elements have the `.baz` class or not. In the case of a single universal selector, there is no performance issue, the selector just matches every element, which is fine. In modern engines, there is also no performance issue, they JIT compile selectors[0] and do other stuff to be fast. Even old engines wouldn’t really have a performance issue in practice unless you were doing something else bad, like having extremely deep DOM trees with extremely large numbers of elements. [0] https://webkit.org/blog/3271/webkit-css-selector-jit-compiler/ https://webkit.org/blog/3271/webkit-css-selector-jit-compile...

enkrs 5y ago

The argument on performance comes from the idea that theoretically the rules are applied in order. So the browser has built in stylesheet of 8px, and after that a margin of 0 is calculated. (And after that, some more specific margin in the stylesheet is recalculated) Basically * { margin: anything } adds one extra calculation to each element in the page. Not sure if the performace hit is measurable tough, knowing how much optimization goes into browser engines.

csnover 5y ago

The universal selector has the potential to be slower than other selectors in naïve CSS engines because CSS works by matching selectors from the right to the left. A rule like `.baz *` matches every element on the page (vs something like `.baz .foo` which only matches elements with `.foo`). The match is only rejected after walking up the DOM tree to the root node to see if any parent elements have the `.baz` class or not. In the case of a single universal selector, there is no performance issue, the selector just matches every element, which is fine. In modern engines, there is also no performance issue, they JIT compile selectors[0] and do other stuff to be fast. Even old engines wouldn’t really have a performance issue in practice unless you were doing something else bad, like having extremely deep DOM trees with extremely large numbers of elements. [0] https://webkit.org/blog/3271/webkit-css-selector-jit-compiler/ https://webkit.org/blog/3271/webkit-css-selector-jit-compile...