2 ms·
Memory impact, no. Atomic stylesheets are generally fractions of the size of a traditional monolithic CSS file. I've loaded up a 6MB CSS file for development lo
by yurishimo 5y ago
Memory impact, no. Atomic stylesheets are generally fractions of the size of a traditional monolithic CSS file. I've loaded up a 6MB CSS file for development locally and it's instant.
Performance is more complicated, but generally it's never an issue. We've had huge webpages forever, often with many different CSS files and HTML included from all across an application and organization. When the browser has all of the CSS files finally loaded into memory, it's FAST.
Here's an old article[0] that looked into some performance metrics. 7000 DOM nodes per page, with crazy nested selectors. The delta between the different tests was around 10% (10-100ms depending on the browser) from the simplest to most complicated, but the absolute rendering time has was still under 200ms for all browsers. Important to note that this test was also conducted when IE9 was still relevant. Computers, and even low end devices, are much faster than what was available in that era.
I reran the tests from the article in Chrome just now, and the insanity selector test ran consistently in under 100ms on a 2020 quad core MacBook Pro. Chrome's performance benchmarking tools confirmed that number as well as the simple benchmark included in the test source.
We also have to take into account that the types of classes included with atomic CSS frameworks are extremely simple for browsers to parse and apply. Because they aren't deeply nested spaghetti, the browser can more quickly index them for use later in the rendering lifecycle.
I would be interested to see what the effects are of atomic CSS on performance using our modern browser environments, but I would guess it's negligible and not relevant compared to any other part of the page rendering and refresh lifecycle.
0: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/ https://benfrain.com/css-performance-revisited-selectors-blo...