Good Practices For Stylesheets

Hello

I’m building my first theme in a long time and I have some questions about stylesheets.

  1. Is it normal practice to have all the sass files compile into one main.css? If no, how do you organise your stylesheets? A different one for each main page/template, or something else?

  2. I’m only 33% through my mid-sized project and my main.css file is compiled to 751kB. Is there a max recommended size for your loaded stylesheet?

Thank you for any input.

Regards,
Jack

Is the final size of your main stylsheet from a development or production built? It is also very important to keep in mind that on a well-configured server the text files are gzipped, which can dramatically reduce the overall file size to be transferred, especially with lots of repeating parts (which often happens in CSS). How big is your main stylesheet as production built and gzipped?

HTTP/2 alleviates the issues with multiple network connections and such. So it may make sense to break of styles to separate stylesheets, e.g. just for the shop part of the site.

I’m still in development, I will try the production build when I’m back at my computer. This is great to know! Thank you.

So you’re saying it’s OK to have two CSS files for complex templates eg. The shop pages? Main.css or shop.css or would you combine what’s needed into one, e.g. shop-main.css?

No, each style file can be registered and then enqueued depending on specific conditions (it is a hook).
E.g. you can check for WooCommerce shop pages (is_shop()) and only then enqueue the CSS file for it.

Are you using bootstrap? If so I highly recommend that you move to Tailwind. I come from bootstrap and my files were around 600 KiB, and when I switched files weren’t bigger than 60KiB. And google lighthouse rating is giving me near 100% performance.
I think one css shouldn’t be bigger than a jpg, so around 300 KiB should be maximum, but this is just my opinion, not a best practice.

2 Likes

To confirm, that’s two files with main.css and shop.css loaded on shop page.

That’s it. Bootstrap seems to be the culprit. Will look into Tailwind thank you.

1 Like

If you decide to stick to bootstrap, avoid extends and use their utilities directly in html for non repeating components instead of building them into the css, so you keep it as lean as possible.

Also, I think you can configure purgecss in bootstrap to remove all the classes you aren’t using.

1 Like

Great tip about purgecss, I will look into that.

What do you mean by “use their utilities directly in html for non repeating components instead of building them into the css,” though?

Well it is a preference based on my experience. Normally I would build all the details of any dom element into css like so:

.card-bg {
  padding-left: 2rem;
  padding-right: 2rem;
}

what I suggest is that, in case you aren’t reusing the same class over and over again, add the utilities directly in the html (bootstrap has a lot of these):

<div class="px-8"></div>

In the beginning it seems a very good idea to have everything in the css because it allows you to use very readable names (like card-bg in opposition to px-8), but at the end of the day, with a complex page this means a huge css which also makes the browser less performant.

This topic was automatically closed after 42 days. New replies are no longer allowed.