Styling

What tools are we learning in this chapter?

Styling is a highly contested space in web development. Surely, no matter what tools I select there will always be someone with a different perspective on which tools I should have written about.

Just to name a few, here are some of the styling tools we're not talking about in this chapter:

Given the broad range and number of tools we aren't looking at, what tools are we going to be learning about? Well, in addition to a few built-in browser techniques, we'll touch on:

Tailwind for its ubiquitous adoption among utility class libraries (nearly 10M downloads a week on NPM)
CSS Modules for its close-to-bare CSS and invisible usage
SCSS for its broad adoption (13M downloads a week on NPM) and the ability to compile complex styling to raw CSS
Emotion for its framework-agnostic approach to runtime CSS-in-JS
Panda CSS for its framework-agnostic approach to compile away CSS-in-JS

Let's get into it.

CSS is awesome. It's also used in every web app out there, which makes sense given that it's one of the three core languages of the web: HTML, CSS, and JavaScript.

If we wanted to, for example, build the header bar of this mockup:

Our markup might look something like this:

<header class="container">	<LogoIcon />	<SearchBar />	<SettingsCog />	<ProfilePicture /></header>

With the container class being defined in CSS like so:

/* header.css */.container {	display: flex;	padding: 8px 24px;	align-items: center;	gap: 32px;	border-bottom: 2px solid #f5f8ff;	background: #fff;}

This works out pretty well for some basic styling!

Now let's build out the search box:

<div class="container">	<SearchIcon /></div>

/* search-box.css */.container {	border-radius: 8px;	color: #3366ff;	background: rgba(102, 148, 255, 0.1);	padding: 8px;	flex-grow: 1;}

The icon is now blue with the background being a very light opacity blue

Now let's import both of these CSS files into the same HTML file:

<link rel="stylesheet" href="header.css" /><link rel="stylesheet" href="search-box.css" />

Annnnd:

The header and search box both have blue text and background

Oh, dear... It seems like the styling for the header has impacted the search box and vice versa.

This merging of styling is occurring because container is the same CSS identifier between the search box container and the header container; despite being in two different CSS files.

This problem is known as "scoping," and is a problem that gets worse the larger your codebase gets; it's hard to keep track of every preexisting class name that's been used.

BEM Classes

One way to solve this problem of scoping in CSS relies on no external tooling than a self-motivated convention. This solution is called "BEM Classes."

BEM stands for "Box Element Modifier" and helps you establish scoping through uniquely named classes that are "namespaced" based on where on the screen they exist.

You might break up the page using different headers, elements, and modifiers

The example we demonstrated scoping problems within has two "boxes":

The header
The search box

As such, the container for these elements might be called:

.header {}.search-box {}

The "Elements" part of BEM is then referring to the elements within each "Box."

For example, both the header and the search box have icons inside. We would then prefix the "Box" name and then the name of the "Element":

.header__icon {}.search-box__icon {}

Finally, we have "Modifiers" to complete the "BEM" acronym.

For example, we might want to have two different colors of icons we support; sharing the rest of the styling across all header icons besides the color.

To do this, we'll prefix the name of the "Box" followed by what the "Modifier" does:

.header--blue {}.search-box--grey {}

BEM is a viable alternative for large-scale codebases if you follow its conventions well enough. Many people swear by its utility and the ability to leverage the platform itself to solve the scoping problem.

However, for some, even the need to remember what "Box" names have already been used can lead to confusion and other levels of scoping problems.

Let's look at some other alternatives to using the BEM methodology.

Utility Classes

Another way you're able to solve the problem of scoping through convention is by leaning into the shared aspects of CSS classes as styling identifiers.

This means that instead of something like this:

<div class="search-container"></div><style>	.search-container {		border-radius: 8px;		color: #3366ff;		background: rgba(102, 148, 255, 0.1);		padding: 8px;		flex-grow: 1;	}</style>

We could instead break these CSS rules into modular reusable classes:

<div class="rounded-md padding-md grow blue-on-blue"></div><style>	.rounded-md {		border-radius: 8px;	}	.padding-md {		padding: 8px;	}	.grow {		flex-grow: 1;	}	.blue-on-blue {		color: #3366ff;		background: rgba(102, 148, 255, 0.1);	}</style>

This means that instead of having one-off classes that are used on a case-by-case basis, we have global classes that are reused across the entire application.

This comes with a few added benefits:

Only one CSS file to worry about
Less duplicated CSS shipped
Easier to visualize styling from markup

But it also has its own downfalls:

You have to figure out naming for every class; consistency can be challenging
Your markup ends up cluttered with complex styles represented by many classes

Tailwind

When the topic of utility classes comes up, Tailwind is not far behind.

Tailwind is a CSS framework that ships with all the utility classes you could ever need. Just like rolling your own utility classes, Tailwind's classes can be applied to any element and reused globally.

Our example from before might look something like this:

<div class="rounded-lg p-8 grow bg-blue-50 text-blue-800"></div>

The box is now a light blue background with dark blue text

While Tailwind doesn't solve the cluttered markup challenges with hand-rolling your own utility classes, it comes with some additional benefits over utility classes:

Ease of training. If someone's used Tailwind before, they know how to use it and what class names to use. Moreover, the Tailwind docs are very, very polished.
Pre-built styling tokens. No need to figure out what padding-lg or padding-xl should be; Tailwind ships with a strong color palette and sane defaults out-of-the-box for you to use as your design system base.
IDE support. From color previews to class name auto-completion, Tailwind has many integrations with most IDEs you'd want to use.

Install Tailwind

To install Tailwind, start by using your package manager to install the required packages:

npm install -D tailwindcss

Next, create a CSS file:

/* src/styles.css */@import "tailwindcss";

Finally, you'll configure Tailwind to integrate with your bundler:

React
Angular
Vue

To enable Tailwind in your React Vite project, you'll need to add a Vite plugin for TailwindCSS:

npm install -D @tailwindcss/vite

Then we'll add this to our Vite configuration:

// vite.config.jsimport { defineConfig } from "vite";import react from "@vitejs/plugin-react";import tailwindcss from "@tailwindcss/vite";export default defineConfig({	plugins: [react(), tailwindcss()],});

Finally, we'll import our src/styles.css file into Vite's entry point of index.html:

<!doctype html><html lang="en">	<head>		<meta charset="UTF-8" />		<meta name="viewport" content="width=device-width, initial-scale=1.0" />		<title>Vite + React</title>		<link rel="stylesheet" href="/src/style.css" />	</head>	<body>		<div id="root"></div>		<script type="module" src="/src/main.jsx"></script>	</body></html>

Since the Angular CLI supports PostCSS out-of-the-box, we can leverage it to add Tailwind.

PostCSS is a CSS transformer that powers Tailwind's compilation of your CSS. (more on this later)

To start, install the required packages:

npm install -D tailwindcss @tailwindcss/postcss postcss

Then, create a .postcssrc.json file and place the Tailwind plugin inside:

{	"plugins": {		"@tailwindcss/postcss": {}	}}

Now, so long as your angular.json file references the src/style.css file we added earlier, you should be off to the races!

Just like React, we'll use a Vite plugin to add Tailwind to our Vue app.

Install the package:

npm install -D @tailwindcss/vite

Add it to the Vite configuration:

// vite.config.jsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import tailwindcss from "@tailwindcss/vite";export default defineConfig({	plugins: [vue(), tailwindcss()],});

And import our src/styles.css file into Vite's index.html:

<!doctype html><html lang="en">	<head>		<meta charset="UTF-8" />		<meta name="viewport" content="width=device-width, initial-scale=1.0" />		<title>Vite + Vue</title>		<link rel="stylesheet" href="/src/style.css" />	</head>	<body>		<div id="root"></div>		<script type="module" src="/src/main.js"></script>	</body></html>

To make sure that Tailwind is properly configured, we can add it to our root component:

React
Angular
Vue

const App = () => {	return (		<a			className="bg-indigo-600 text-white py-2 px-4 rounded-md"			href="https://discord.gg/FMcvc6T"		>			Join our Discord		</a>	);};

React Tailwind - StackBlitz

Styling

This article is part of a series: The Framework Field Guide - Ecosystem

Post contents

BEM Classes

Utility Classes

Tailwind

Install Tailwind

Tailwind Compilation

Dynamic Classes using Tailwind

Scoped CSS

Deep CSS

Sass

Install Sass