Why Aphrodite became our choice for styling React apps
I have been working with React since the start of my professional career to build web applications, and the web wouldn’t be the web without CSS.
- Hard to read code when looking through basic inspection tools
- Animations, media queries and overriding nesting classes are not possible
- Integrating third party components isn’t easy since they aren’t usually agnostic to styling practice
These limitations led to a couple of hacks like having a special CSS file to write rules that only worked on classic CSS and to override certain properties from third party packages. This was not optimal so we started to take a look on alternatives to pure inline styling.
A couple of options stood out, amongst them JSS, Radium and Aphrodite. When taking a superficial look at JSS and Radium they seemed to be more robust, with access to custom plugins but at the same time also looked more complex, not exactly what we were looking for to start with, as we wanted something simpler but powerful at the same time. So we took a look at Aphrodite and must say that so far we have not been disappointed.
Aphrodite is developed by Khan Academy and their motto for this project is: “Aphrodite: Inline Styles that work”. You can see a bunch of features they support on their github but I will be showing some of the features we needed the most.
For those of you who have worked with React-Native you can see that the syntax to create styles is similar to Facebook’s approach, we simply define the styles inside Aphrodite’s StyleSheet and we are good to go. When applying the styles simply use the “css” method from Aphrodite inside the className prop of the Component.
The main difference from basic inline styling would be the use of className prop instead of the style prop. But that is it, ready to go.
You can find some additional examples in the project’s github repository but you will notice the syntax will be the same. We simply define the keyframes we want and then the animation properties inside the style with the animation name referring to those keyframes.
Media queries are the basic tool for responsive design and with inline styling this was not possible. With Aphrodite not only do we have that possibility, as it is really simple to do. We need only add a key to the class object we are defining inside the styles and we are set. Let's say I wanted to decrease the fontSize of some text when the screen size decreased to make better use of the space:
The declaration is exactly like in CSS we need only to set it as a key inside the class object of the styles constant and we are good to go.
Overriding nested classes
When building applications with React it is common to use third party packages that bring already made components to ease your life, but when trying to shape those components to your need you might find that they don’t bend easily. Some components bring their own CSS classes and you might need to override them, this is possible with Aphrodite but with a kind of a hack:
This would override the class “testClass” making the text “Action 1” green. Granted it is not the cleanest solution but it works and I only ever have to override classes from third party components so it shouldn’t see too much use in normal situations. You can find an explanation why this works like this here.
When dealing with inline styles it can be a mess to inspect the code and find the exact component you were looking for.
With Aphrodite the class names are generated so that they are unique but they will take into account the class name you gave them. This will make the code more structured and easier to read:
If you have a good naming system for your classes you are guaranteed to find what you are looking for, and in bigger projects this proved to be an important factor.
We are still keeping an eye on alternatives and on the “market” of styling frameworks and who knows what the future might bring but so far I am really happy with Aphrodite, its simplicity has allowed me to write more coherent code, to detect UI bugs easily and to focus more on the architectural challenges of the applications and less on the styling.