Select Page

Hey, make sure you read the last part about styled components. I think you will like that. But before, let’s start from the beginning, shall we?

There has been a number of articles related to JavaScript Fatigue, including one wrote by me: Does the JavaScript Mess Sometimes Make You Feel Stupid? You Are Not Alone… , but the fact is that dealing with CSS is a mess too.

Just a few days ago, Otis Wright published a post: If CSS is so easy why does everyone suck?  and I think he just covers the surface.

In order to deal with CSS, some elements required to specify some prefixes such as:

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

So, in order to deal with simple things like that and other more complex issues such as variables, mixins, functions and many other techniques, the community at large has create CSS preprocessors or scripting languages that are interpreted into Cascading Style Sheets (CSS)., The most popular ones are SASS, LESS and Stylus.

Besides that, there are tools like PostCSS, a tool for transforming styles with JS plugins. With PostCSS you can have access to many plugins that in theory make your life easier. But all these options come with a price:, you need to learn how to work with all these tools.

Furthermore, in most cases designers and developers like to use a CSS framework such as Bootstrap, Foundation, Semantic UI, Materialize, Material UI and many more.

But guess what? Each of these frameworks has a learning curve too. AUCH!

And CSS itself has been evolving. Now we have flexbox, a new layout mode in CSS3, and soon we will have the CSS Grid Layout Module (under development). Both flexbox and CSS Grid are great improvement to CSS, but again they add complexity.

Are you getting confused?

Wait. I am just getting started:)

In the title I am referring specifically to styling React, which, as you should guess by now, includes a number of additional options for styling not available otherwise.

Styling in React

In React, in particular, we have some additional alternatives to style applications.
We can do inline styling combining CSS and JavaScript and even we can do styling managing it at the component level.

Andrea Williams covers some options on her Styling React post, including:

Additionally, there are even alternatives that tied in with a particular CSS framework. For example, React-Bootstrap, is a is a library of reusable front-end components. It allows to get the look-and-feel of Bootstrap, but with much cleaner code, via React.js’ framework. An example with Bootstrap would look like:

<button id="something-btn" type="button" class="btn btn-success btn-sm">
  Something
</button>

And the callback function in JavaScript would be something like

$('#something-btn').click(someCallback);

With React-Bootstrap it would look like

<Button bsStyle="success" bsSize="small" onClick={someCallback}>
  Something
</Button>

Hey, we are not done just yet.

A few days ago, during ReacttNL 2016, Max Stoiber gave a presentation about what is the best way to style React applications. He covered the current landscape and how the different alternatives compare given a set of ideal conditions. On his view, which makes perfect sense, the criteria includes:

  • No build requirements
  • Small and lightweight
  • Support global CSS
  • Support entirety of CSS
  • Colocated
  • Isolated – in a component-based system you want your styles to be isolated to the component you are building
  • Easy to override – if you want to change how a button looks in one component you don’t have to create a new CSS class
  • It should be themable, so it can use UI libraries
  • Server side rendering
  • No wrapper components, because it makes complicated to understand where things come from and makes things harder to maintain

There is no solution that satisfy all these things. Thus, you have to make certain trade offs when selecting your CSS approach. To benchmark the approaches, Max uses an use case.

 

I am not going to go into the details. For that you can watch the video above. However, he compares:

  • CSS
  • CSS Modules
  • JSS
  • Aphrodite
  • Radium

Styled components

After that he introduces styled-components  and on git-hub, which uses components as a low-level construct. They can be adapted based on props.

Intrigued? Good. There is more…

Styled components satisfy all the criteria but the last one – no wrappers, which is more than any of the other options.

But wait, there’s more (ha, this just sounds like an infomercial).

Styled components also covers another category that no one else has ever done before. It has full React Native support. That means that for the first time ever it is possible to style React Native applications with actual CSS.

It gets even better. You can even share styles between React Native and web applications. Hence, cross-platform app styling is now possible. It doesn’t matter if you are doing a web app or iOS app or an Android app, you start all your components the exact same way. There is no need to work with different APIs.

If you just want to get to the meat of Max’s presentation, jump to 25:46 in the video.

Did I get your attention now?
I bet so.

Finally, just for fun, please answer the following question…

Conclusion

Styling web apps is not as easy as it seems. CSS is evolving and getting more complex every day. Styling React apps, in particular, include many additional options, and each one brings some advantages and disadvantages. However it’s good to see a lot of effort to make React styling easier and more powerful.

styled-components looks like a great option to consider. Do you think you would try it in your next project? Comment below.

Subscribe to MeteorLife  Blog

Subscribe to MeteorLife  Blog

Get notifiied when new content is available as well as when we launch special promotions for our course  Create Web Apps with Meteor & React

Thanks. You have successfully subscribed!