Home Forums Gutenberg Efficient CSS in the front end with a modular workflow


Efficient CSS in the front end with a modular workflow

  • My site has a structure essentially

    — 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
    but that only goes so far.

  • 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.

  • 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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.