神刀安全网

State of React and CSS

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.

Recently, I started to work on a project that helps us to develop UI components isolated from the main app. Initially, I assumed everyone would write CSS in JavaScript with React.

After a while I realized that it’s not fair to assume that everyone would write CSS in JavaScript. CSS is a land of choices.

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.

Frontend Developer

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.

UI Designer

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.

Core developer

Core developers build some core JavaScript tools/libraries and focus on non-UI stuff. CSS is something they don’t need to worry about.

Architect

There are plenty of CSS frameworks.

There are different CSS pre-processors.

With React, now we have CSS in JavaScript.

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

There are a bunch of pretty good CSS frameworks, like Bootstrap and Semantic UI . You can easily use them with your React project.

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

There are UI frameworks specifically written for React. For example, take a look at Material UI and Rebass . With these frameworks, you can simply import any UI component and use it immediately.

For example, here’s how you create a inline form with Rebass.

�� : Wow. This is so cool.

Yes. It is.

With this approach you don’t need to deal with CSS directly. If you need to customize the look and feel, there are some ways to do it easily in JavaScript (at the runtime).

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

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.

For CSS modules you need to have support from your build tool. And it has the support for most popular tools, like Webpack and Meteor .

Using Inline CSS with JavaScript

React has changed how we write CSS by allowing us to write inline CSS via JavaScript. With this approach we can build UI components independently and we can easily distribute components (since CSS lives inside the container).

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.

With this approach, you don’t need any special support from the build tool for CSS. That’s because it’s just JavaScript.

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.

At the same time, we don’t really like to build each and every UI component from scratch. That’s why we’ve picked both Rebass and Radium .

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.

1.) If you are starting a new project, try to write CSS in JavaScript. If you find you like it, go with it.

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.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » State of React and CSS

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮