CSS in JavaScript: The future of component-based styling

By adopting inline styles, we can get all of the programmatic affordances of JavaScript.This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also solves a lot of the problems that CSS has, such as global namespacing and styling conflicts.

Thank you for reading this post, don't forget to subscribe!

For a deep dive into the problems that CSS in JavaScript solves, check out the famous presentation: React CSS in JS. For a case study on the performance improvements you get from Aphrodite, you can read Inline CSS at Khan Academy: Aphrodite. If you want to learn more about CSS in JavaScript best practices, check out Airbnb’s styleguide.

In addition we’ll be using inline JavaScript styles to build components to address some of the fundamentals of design I covered in one of my previous articles: Before you can master design, you must first master the fundamentals.

A motivating example

Let’s start off with a simple example: creating and styling a button.

Normally the component and its associated styles would go in the same file: Button and ButtonStyles. This is because they fall under the same concern: the view. However, for this example, I broke up the code into multiple gists to make it more digestible.

Here’s the button component:

Read Full Article