if you’re absolutely new to CSS, start here at the Mozilla Developer Network(or MDN). they’re the people that make Firefox and have the best reference guides for CSS. in general though this guide assumes you’ve got a base understanding of CSS so go forth and mess around with the language as much as you can before moving on to the rest of the more complicated stuff.
playgrounds
an easy way to get started is by checking out some of these tools that let you play around with the language:
CodeSandbox: lets you mess around with a React app in real-time.
CodePen: a social development environment for front-end designers and developers.
CSS Zen Garden: shows you how a single HTML page can look a 1,000 different ways. this site goes way back and was inspiration to many a designer/developer.(you can mess around with the CSS via the Developer Tools in your browser.)
defining colors, a minor note
there’s been a lot of standards around color, beginning with rgb and including other fancier things like hsl. the new“king” of color definition is oklch.
beyond CSS: CSS Modules and CSS-in-JS
this guide is about writing an application not a regular webpage. to that end, you shouldn’t be using regular CSS with <style> tags anymore — as your application grows and more contributors add to it, you will drown in a sea of madness and salty tears. yes, your mother taught you to wash behind your ears, brush your teeth, and never, EVER use inline styles in your HTML. but those days are over and a new era has come.
the truth is that this space is still rapidly in development and the dust isn’t quite settled yet. i think there are compelling arguments for both CSS-in-JS and CSS Modules. you’ll probably fine going with either these days.
CSS Modules: a happy middle ground
CSS Modules are a great way to get a lot of the benefits of CSS-in-JS without leaving the CSS world altogether. here’s a helpful primer on getting started.
CSS-in-JS: some compelling arguments
CSS-in-JS forgoes CSS files altogether and says we should have our styling where our components are. think about it this way. when you’re sharing HTML these days, we tend to do so via HTML-in-JS. in other words, one can create React components and publish them to the general web to share to fellow developers. similarly, one could argue, the best way to share CSS is to package them inside of something standard like JS.
great reads on the topic
Farewell CSS: a great take on why you should probably be doing CSS-in-JS.
CSS in JS: a watershed moment of a slideshow arguing for you to forget everything you now about how inline styles are bad.
A Unified Styling Language: from the co-creator of CSS modules, an argument for CSS-in-JS and to leave behind things like BEM which are only conventions/opt-in vs. something that’s baked-in to a methodology.
package options
again, there’s so much action going on in this space that it’s still to be decided what paradigm will win here. for now though, my tentative recommendation is emotion.
emotion: rapidly in development, new to the party.“next-gen”.
styled-components: personally, i’m not a fan since it requires bundling a CSS parser. bleh.
glamorous: uses objects in JS to declare CSS for a particular module.
Aphrodite: uses objects and lets you do server-side rendering, too.
tl;dr
CSS for newbies
playgrounds
defining colors, a minor note
beyond CSS: CSS Modules and CSS-in-JS
CSS Modules: a happy middle ground
CSS-in-JS: some compelling arguments