Are React and CSS Friends?

The cream pencil crayon you know

Resources


This page is playable as slides!

Press p to play as slides, then j and k to page. Press s for speaker notes, and yes you may give my talk.

Hello, <RK />!

I'm Wei

  • React web developer
  • @wgao19 everywhere

Are React and CSS friends?

I did a workshop on styling Gatsby site last Saturday. To prepare for it, I've researched and thought a lot about styling a Gatsby site. Or maybe I should say, a content-centric React site.


how do you style a content centric & React site?

React is changing the way we write styles


Without we realizing it, we're already styling our site very differently with the advent of React.

🤞 contexts & components

We're moving from a page- or template-based mindset to a component-based mindset. This comes down to the fact that we're thinking more in terms of contexts and components, rather than a flat out page.


contexts must preserve the needs for different components to live in


components must be adaptable to different contexts


When I just started doing React my team lead did not allow me to put a default width to buttons because the component container will decide that. They look like some insane buttons to me, but "no abstraction is better than wrong abstraction," or so he said.

☝️ namespaced CSS

When and why did we start to have the needs of namespaced CSS?


we're writing way more components than pages

It seems to me that that's because we’re writing way more components than pages.

✌️ build step is writing our CSS


... and that's messing with our thought process with selectors

as well as the organization of our CSS rules.


  • Vanilla CSS: flat organization of cascading & combining selectors

Initially when we wrote vanilla CSS, there were no nesting. We had to use only CSS's cascading and combination of selectors to select the exact DOM elements we want to style.


  • SASS & LESS: now we can nest selectors!

Apparently some of us cannot resist the temptation of nesting selectors.


  • BEM: nonono I suggest that we not nest selectors

While some other of us keep seeing the evils in it and attempting to prevent us from nesting those things.


  • CSS Modules: there is no such need to nest selectors anymore!

  • many CSS-in-JS libraries: are you sure? let’s “compose”!

Even till today I don't think we don't have a unanimous conclusion.


(selectors + namespaced) * build time magic 🤯

And what can be even more confusing is that now build time tooling is writing our selectors in a non-trivial way.


CSS selectors are now harder to reason about

The understanding of the cascading logic and selector combination rules become background and assumed knowledge. If you master it, great.


color book game?

Otherwise, going very scoped into component feels like colorbook games that can be more definite than expressive.

Spectrum & responsibility

also A Conceptual look at theming – Brent Jackson

I read this article by Brent Jackson, where he talks about these two things that ring a bell in me: spectrum and responsibilities.

Spectrum

global 🐶🐱🐭🐹🐰🦊🐮🐵 component

Responsibility

  • theme objects -> global
  • dynamic information -> components

All roads lead to Rome

Maybe it's why styling and typography are favorite aspects of sites. There really no such thing as "the best practice", and the exploration creates a lot of joy.


And so I hope we'll all put down the color book,


and have fun with real drawing.