State of React and CSS
TLDR: You can think of this post as the CSS version of the JS Fatigue article. This is based on some research I did recently.
In this article, I will share what I found from the research. Let’s get started.
: Wait. Can I have a look at the tool you mentioned?
It’s React Storybook . It’s still a pre-release software and I am planning to do a release in a few days.
How do we use CSS?
The first question we should ask is how we are using CSS. The answer is subjective, based on the role we play in the team. Let’s explore.
The role of the frontend developer is to implement business functionalities. This involves many tasks, including creating the User Interfaces.
Frontend developers don’t usually worry too much about CSS. They mostly care about the application’s functionality and the layout of the app.
The role of the UI designer is to build great User Interfaces that customers love.
Basically, UI designers need to make sure that the design they create in Photoshop is what is actually implemented.
They usually care a lot about CSS and work with the components created by the Frontend Developer.
It’s really hard to make a clear boundary between the Frontend Developer and the UI Designer these days. Usually a team of a few people will take care of both these roles.
There are plenty of CSS frameworks.
There are different CSS pre-processors.
So, who’s going to decide what should we use in our project?
The architect is the person who is going to take that decision .
When making the decision, the architect needs to be very careful. Bad CSS makes it harder to maintain the app in the long run.
In the rest of this article, I will talk about how the community use CSS with React and help the architect to make a wise decision.
Approaches to use CSS with React
There are many ways we can use CSS with React. Let’s discuss some of these approaches.
Using Existing CSS Frameworks
If you go with this approach, there’s not much new stuff to learn.
But, there are much better ways to write CSS with React.
Using CSS Directly (including CSS preprocessors)
This is something you can do when you are working with an existing CSS framework or trying to style from CSS directly . You can also use CSS preprocessors like SCSS or LESS.
Your built system may have support for these. With Webpack , you can configure to import CSS files just like any JS file.
If you use Meteor , it will import CSS automatically for you.
Using React-Based UI Frameworks
For example, here’s how you create a inline form with Rebass.
: Wow. This is so cool.
Yes. It is.
Even though this is a pretty cool way to style your app, there are not many choices. Material UI is the only one that is popular and stable.
CSS modules give you a way to write modular CSS. By default, every CSS rule you write is available inside a local namespace, so it won’t pollute the global namespace. You can write a CSS module using plain old CSS like this:
Then you can simply import the CSS className and use it in your React component.
But the default React implementation doesn’t have support for some CSS features like media queries. Projects like Radium will help to get those missing features.
Take a look at this presentation to learn more about CSS in JS.
On the other hand, this is a fairly new thing and there are some challenges we need to address as a community.
: Okay. That’s a lot of choices. What should I choose?
Well, that’s a hell of a question.
What to Choose
React is all about rethinking how we build our apps. But, it raises the question of whether to follow the same rule for CSS.
At Kadira, we believe in writing CSS in JS.
We get the default set of components from Rebass. We also build some components from scratch with Radium.
So here’s my personal suggestion on this topic.
2.) If this is an existing project/team and you’ve got existing stylesheets, then it’s a wise idea to go with your traditional approach.
: Sounds good. So, what’s the approach you selected for your devtool?
It’s a React devtool. We can’t really force developers to write CSS in a specific way, so I simply had to add support for all the options.
So, what’s your opinion on this? How you write CSS with your React app?
followKADIRA VOICE for articles like this.