Efficient CSS in the front end with a modular workflow

• chrispink

• September 21, 2023 at 6:23 am

My site has a structure essentially

blocks
— my-first-block
— block.json
— style.scss
— style.css
— template.php
— my-second-block
— block.json
— style.scss
— style.css
— template.php

which is a very good way to product templating blocks for a website and, in the backend, I don’t mind that there’s a CSS file for each block

but in the front end, I now have a CSS file for every individual block.

So, the thing I would like to do is keep this way of working in the backend (maybe) but have a single file of all CSS

THere is a long winded way, that in my style.scss I have many import statements

import ‘blocks/my-first-block/style.scss’;
import ‘blocks/my-second-block/style.scss’;
…

In a theme that has 40 blocks this is a bit clunky.

In my block.json the statement that controls the CSS is

"style": [ "banner-generic" ],

…which appears to refer to style.css in the folder /blocks/banner-generic. BUt as I’m only learning I’m not entirely sure how this work.

Any ideas or links to resources?

I got the initial method from
https://www.billerickson.net/building-acf-blocks-with-block-json/
but that only goes so far.

• chrispink

• September 25, 2023 at 10:54 am

At the moment it seems my best way is to use a CSS aggregating plugin. I am using Autoptimize and it works very well, picks up my 40 CSS files and bundles into one. It remains to be seen whether I get penalised for render blocking.

It would be nice to have a more targetted solution; gather all the CSS for only the blocks used on the page and parcel that up into one file. The other page CSS can take care of itself. It might even be that the first two blocks (above the fold) could be put into a separate file.

• John Huebner

• September 29, 2023 at 12:08 pm

You either have to do that or use inline CSS rather than individual files.

My option would be to use inline CSS.

Not that autoptimize can’t do it, but since every page could have different CSS your cache could become large and you should watch your server disk usage.