3 ms·

Short question: Does anyone know about any performance issues using semantic vs class-based css? I ask, because in the early days of css we also tried to use s

Short question: Does anyone know about any performance issues using semantic vs class-based css? I ask, because in the early days of css we also tried to use semantic style and had strange rendering issues on huge data tables and everytime, when the page had a lot of content. After trying a few things we came to the conclusion, that (especially but not only) IE had huge performance issues with semantic style. After switching to classes, everything worked fine. It technically made no sense, but since we did not change anything else, we came to the conclusion, that class based is faster than semantic... Did anyone ever measure this for modern browsers?

rimliu 4y ago
Classes can be semantic too. Are you talking about element selectors?
- sandreas 4y ago
  Yes, I meant element selectors... as you see it happened some time ago when I was more into HTML and CSS :-) Now I'm more into backend.
laundermaf 4y ago
You’re referring to “tag selectors” vs “class selectors” Engines are now good enough you don’t really have to worry about selector performance unless you’re using ridiculously complex selectors, and even then the least efficient part is actually the layout calculation and painting. This site is super simple and is super laggy on Safari Mac because they use awkward effects and animated gradient backgrounds, for example: https://colorjs.io/ https://colorjs.io/
- sandreas 4y ago
  Thank you... sounds plausible. Is there a reference or performance test for this you can refer to?
ayushnix 4y ago
I came across this blog post which talks against styling HTML tags and using classes for performance reasons and scalability. I'm not sure if the impact is noticeable on web browsers, I'd love to see an objective comparison. https://frontstuff.io/you-need-to-stop-targeting-tags-in-css#performance-issues https://frontstuff.io/you-need-to-stop-targeting-tags-in-css...
- sandreas 4y ago
  Interesting, thank you.
gherkinnn 4y ago
The last time I saw CSS selector performance come up was in 2015 but most search results are even older. Nowadays you’ll have a thousand problems worth solving before you get to fussing over selectors.

rimliu 4y ago

Classes can be semantic too. Are you talking about element selectors?

sandreas 4y ago
Yes, I meant element selectors... as you see it happened some time ago when I was more into HTML and CSS :-) Now I'm more into backend.

laundermaf 4y ago

You’re referring to “tag selectors” vs “class selectors” Engines are now good enough you don’t really have to worry about selector performance unless you’re using ridiculously complex selectors, and even then the least efficient part is actually the layout calculation and painting. This site is super simple and is super laggy on Safari Mac because they use awkward effects and animated gradient backgrounds, for example: https://colorjs.io/ https://colorjs.io/

sandreas 4y ago
Thank you... sounds plausible. Is there a reference or performance test for this you can refer to?

ayushnix 4y ago

I came across this blog post which talks against styling HTML tags and using classes for performance reasons and scalability. I'm not sure if the impact is noticeable on web browsers, I'd love to see an objective comparison. https://frontstuff.io/you-need-to-stop-targeting-tags-in-css#performance-issues https://frontstuff.io/you-need-to-stop-targeting-tags-in-css...

sandreas 4y ago
Interesting, thank you.

gherkinnn 4y ago

The last time I saw CSS selector performance come up was in 2015 but most search results are even older. Nowadays you’ll have a thousand problems worth solving before you get to fussing over selectors.