Styling React Components

Why I chose glamorous

To find a maintainable and scalable way to style React components.

These were the features I was looking for in a React styling system:

I should not have to worry about how a component is styled in order to use that component. Using a component should be as easy as import MyComponent from ‘./MyComponent’. This means that I won’t have to sync up css files when using components (yay!).

Native CSS is global by default. Global styles work great for styling documents but can create problems when styling large web applications. To deal with globals in CSS right now, we have to make sure our class names are specific enough to avoid naming collisions. Naming collisions due to global CSS class names result in unpredictable styling and are hard to debug and fix.

I want the styles I write to be locally scoped to the component I’m developing. This means that I can be confident that my styles won’t bleed into components.

I should be able to confidently delete styles and know that I’m not going to break anything I didn’t expect. This will make the code way more maintainable.

The typical way we handle state-dependent styling at iFixit is to define state-specific classes (e.g. .button-disabled) and apply that class to an element conditionally with JavaScript. This method works for simple cases but it can get complicated for more involved use cases. Ideally, I could define the style of a component as a function of the component’s state. This is similar to the way React renders the view as a function of the application state. Here’s an article explaining this concept:

Site-wide constant values like colors, spacing, font sizes, breakpoints, etc. should be available to any component. A component should be able to import the constants like this: import { colors } from ‘./constants’. This will enforce visual consistency and limit the number of decisions I have to make while developing.

We don’t want to lose any feature that we have now. We still want to be able to use native CSS features like:

With glamorous, styles are defined in the same file as the component. This makes it easy to develop and maintain components because all the relevant code is bundled in the same file.

Here’s an example of a simple Button component styled with glamorous:

Notice that using the Button component is super simple. No need to handle any separate CSS files.

Glamorous uses glamor to generate unique class names under the hood so we can be confident that our component styles are locally scoped.

Because all of our component styles are local, we can be confident when deleting code that we won’t affect any other parts of the app.

Glamorous allows us to define styles as a function of the state, like this:

This method is a lot more declarative than conditionally applying classes. Here’s an example of using dynamic styles with our Button component:

We can use simple JS constants to share values like color, spacing, etc. Here’s an example Button component using shared constants:

Notice that we’re just using plain JS to handled shared constants.

These slides are kind of famous for changing the way we think about CSS. Check this out if you’re thinking: “Why would anyone want to write CSS in JS? What a terrible idea!”

This is a good overview of all the ways to style React components. Check this out if you’re thinking: “What are the alternatives to glamorous?”

Check this out if you’re thinking: “Glamorous seems cool. How do I get started?”

Related posts:

The Traceto ICO offers a decentralized KYC or Know Your Customer network, which provides a wide-ranging solution for businesses in the cryptocurrency space by merging the blockchain with automated…

Stepping into the new Mary Low Coffee House takes one’s breath away. It is unlike any other building on campus and was initiated and run all by Colby students. The idea, creation, design, and…

When it comes to backend development in Python, Django is one of the best frameworks you can find. It enables you to do fast development because of the number of features it has and its built-in ORM…