Does adding css in the customizer instead of base css file have any downsides. Let’s say it I add the max allowed on each section and I have a bunch of sections. Will there be a negative performance impact vs adding to the base css file?
Hello @ShopDoc ,
If we add CSS in the customizer instead of the base CSS file, there can be some downsides, especially if you’re adding the maximum allowed CSS in each section and have multiple sections. Considering Shopify, here are some possible negative performance impacts:
-
Increased Page Load Time: Adding CSS in the customizer generates tags within the HTML for each section, which makes the HTML bulkier. This can increase page load time, especially if there are many sections or complex CSS.
-
Reduced CSS Caching: CSS added through the customizer is embedded in the HTML rather than in a standalone, cacheable file. This means the browser has to download this CSS every time the page loads, unlike a base CSS file, which can be cached and reused for future requests.
-
Maintenance and Readability: If a lot of CSS is spread across different customizer sections, it can be difficult to maintain and debug. Keeping styles centralized in the base CSS file makes readability and maintenance easier.
-
Higher Memory Usage: Inline styles for each section consume more memory, as each block creates a separate style context within the DOM.
The best practice is to reserve customizer CSS for unique or section-specific tweaks and keep main styling in the base CSS file.
1 Like
Great. Thank you!