A Guide to Organizing Styles on Fulcro apps

I was just writing some UI Kit code to work in the new Pathom Index Explorer that I’m working on. I’ve done this kind of things too many times now, and some patterns keep emerging; today I figure a way to organize that is worth sharing, so let’s dive into some tips and tricks to keep your app styles sane and fun.

This guide assumes you already know Fulcro and understand how the CSS system works there.

Motivation

I tend to write a lot of development tools when you are doing something that people will add core upon, you have to be extra careful about not colliding things.

Imagine if I tried to use something like Bulma CSS to help me with some bare elements, it could make my life easier. The problem is that Bulma uses very short and common names for its classes, things like container, column, content

Those are nice and friendly for the user, but the chances are the user will not be using Bulma as well, he could be using Bootstrap, and if both CSS’s are included they will conflict hard, screwing things for both sides.

The Fulcro CSS solution to this problem is simple: namespace everything!

This is just a matter of making names long enough that they won’t collide with other peoples names, in our case, it’s a Clojurescript app, which means we can leverage the component namespace and name to create very unique CSS class names.

Just as a refresh, let’s look at a simple custom styled button in Fulcro:

And just to be clear, let’s separate UI components from regular components, when I say UI components I mean components that have no query or ident, just pure render UI components that have custom CSS on it.

Problem 1: including CSS for UI components

The first thing that might be annoying about writing those kinds of UI components is that Fulcro requires you to link the components so the CSS is extracted. This is fine for regular components, but for UI components you don’t want to :css-include every usage of Button for example.

To reduce this, my hint is that you create a single component that holds all of the UI components that you have, and then you just include that component in your app Root, and you are done, now you can just use the factories and don’t care about the CSS anymore, everything will be there. Here is a demo implementing this idea:

Problem 2: using base common shared classes

Another common thing that I do is have some shared classes, these are usually some tiny definitions that are useful in many situations, like having a class to make something flex, or to make a pointer cursor, or add scrollbars.

You might be tempted to just write global class names and re-use those, but then you have to keep writing long names or get back again on the collision problem. I wanna give you another option.

Instead, you can add those general classes to that UI composing component we just created to compose the UI components; then you make some helpers to easily get the classes from it:

That’s it for today, I hope this can you help you to better organize your Fulcro apps UI Kit, see ya!