Styling React components with Functional CSS.
There are multiple ways to write Css these days: CSS in Javascript, CSS Modules, Functional CSS, BEM (naming methodology) just for mention some of them. Each of them have their own cons and pros but mainly it depends on what large and complex is your app and what you and your team decide to use. I want to show you a simple but powerful pattern that let you configure (add styles) your components for being used in different scenarios.
We’ll be doing a simple demo app using Functional CSS. But first let’s see what is Functional CSS.
Functional CSS also known as Atomic design means that you have small single purpose classes that are named based on their visual function.
So instead of this:
You have this:
Note, we’ve added some css classes to a <div> instead of add a bunch of properties to a single class. This can sound a bit confusing at the beginning but trust me doing it that way has a lot of benefits: you don’t have to write any CSS classes (if you use a framework like the ones shown below), and also you don’t have to worry that changing some styles will break some other places in your app, just to mention some of them. Here is a great article defending Functional CSS if you want to dive in.
Frameworks using Functional CSS:
This is the simple component we’re going to build, a simple card:
Let’s start splitting the Card in multiple pieces, at first sight we can define 5 components:
<Card/>
<Box/>
<Header/>
<Text/>
<Button/>Note I want to keep this example simple but it’s always a good practice separate them in small components that can be reused later.
So here is the question: How can we style that Header with font-weight or that Button with background-color without passing the css classes explicitly?
We can simply pass some props to the components and use something that transform those props to Functional css classes, and we could do that with a High Order Component (HOC).
Our withStyles HOC pass down all the props within the className that is getting from the buildClass function, let’s take a look at this function.
This function only transforms your mapped props defined in the propNamesMapped object to classes that you already have (using a Framework or built by you). Note that you need to define those props with a class as the value. Let’s suppose I pass these props:
textColor: "danger"
padding: "2"It will generate the following classes:
className="text-danger p-2"Finally we can connect our components with the withStyles HOC, note in the code above that the Box component receives className as a prop:
Everything is ready and you can now start to play with different styles configurations, let’s add some settings to the Card component wich is on the top level component tree:
The Card will receive those props and will pass it down to the rest of the components tree.
That’s all guys I hope you enjoyed this demo, the source code can be found on my Github profile, or just click on link below:
