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
- is universal.css a joke?
-
do you like the idea of theme objects?
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.
