Modularity for CSS

[Cleanshooter]

One thing I noticed the other day while doing some basic performance testing with lighthouse was that Google is complaining about including CSS that isn't being used. At the time I saw it I kinda blew it off (my app is still in the early development stages) but when I looked further I saw that it was actually complaining about the unnecessary CSS from bulma.css.

It got me thinking, 'Is there a way to slim this down?"

In the past I've used tools like CSS Modules to load CSS for a component when it's needed rather than loading all of it all the time.

Then I decided to look into it more and it seems that even Bulma supports this concept OOTB: https://bulma.io/documentation/overview/modular/

So I'm curious what people think about including Bulma as a project dependency and "in-lining" the CSS to each of the components. I know it'd be a big change but I'm curious what people think about the approach. I'd love to contribute to the effort but I don't want to start if there isn't any interest.

[couds]

Hi @Cleanshooter

Until V3. Bulma was included on the library but we decided to exclude it because of the difficulty of setting it up in a way that allow overwriting the sass variables.

You can check it here https://github.com/couds/react-bulma-components/tree/v3.4.0

We also perform a pool about that https://doodle.com/poll/mqqpxwkzm6nnrs3s

[Cleanshooter]

Makes sense. Thanks for the response. I can see the desire for flexibility superseding the want for locally scoping the css to the component.

I may just create wrappers for the ones I use in my own project and just scope the css myself... that way my variables apply.

[kennethnym]

I think separating Bulma CSS from this library should make it easier to integrate the Bulma CSS files with your own because you can combine them together and pass them into a CSS minifier or similar tools that strip away unnecessary CSS styles.

[Cleanshooter]

Yup, after thinking about @couds comments I agree and thats the approach I'm going to take.

Right now I'm including the full .scss setup in my build. I think I'm just going to copy the main bulma import file and comment out the ones I'm not using (yet). 😁