A

CSS & Styling Overview

css styling frontend tailwind bootstrap frameworks design

CSS & Styling Overview

Styling web applications has evolved dramatically over the years, from plain CSS to sophisticated frameworks and build systems. Understanding the different approaches to CSS helps you make informed decisions about how to style your projects. This guide provides an overview of the CSS landscape and links to detailed articles on specific topics.

Styling Approaches

Traditional CSS

Plain CSS is still the foundation:

/* Plain CSS */
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

.button:hover {
  background: darkblue;
}

Pros:

  • No build step required
  • Universally supported
  • Simple to understand

Cons:

  • No variables (before CSS custom properties)
  • Global namespace
  • Hard to maintain at scale

CSS Frameworks

Pre-built component libraries and utility classes:

Component-based frameworks:

  • Bootstrap - Most popular legacy framework
  • Foundation - Alternative to Bootstrap
  • Bulma - Modern CSS framework

Utility-first frameworks:

  • Tailwind CSS - Modern standard
  • UnoCSS - Faster Tailwind alternative

→ See CSS Frameworks History for the evolution of these approaches.

CSS-in-JS

Write CSS in JavaScript:

  • styled-components - React CSS-in-JS
  • Emotion - Alternative to styled-components
  • JSS - JSON-based styles

→ See styled-components for details on CSS-in-JS.

CSS Modules

Scoped CSS with build tools:

/* Button.module.css */
.button {
  background: blue;
}

import styles from './Button.module.css';

<button className={styles.button}>Click</button>

For React Projects

Modern (2024+):

Legacy:

  • Bootstrap - Older projects
  • Sass/SCSS - Pre-2020 projects

For Vue Projects

  • Tailwind CSS - Growing in popularity
  • Scoped styles - Built into Vue
  • Vuetify - Material Design framework
  • Quasar - Full-featured UI framework

For Angular Projects

  • Tailwind CSS - Modern choice
  • Angular Material - Official Material Design
  • Component styles - Built-in scoping
  • Sass/SCSS - Traditional choice

For Svelte Projects

  • Tailwind CSS - Common choice
  • Scoped styles - Built into Svelte
  • SvelteKit UI - Component library

For Content Sites (Astro, etc.)

In-Depth Guides

Frameworks & Libraries

Modern:

  • Tailwind CSS - Utility-first CSS framework
    • Most popular modern approach
    • Tiny production bundles
    • Great developer experience

Legacy:

  • Bootstrap - Component framework
    • Dominated 2010s
    • Still used in many projects
    • Good for rapid prototyping

History:

  • CSS Frameworks History - Evolution of CSS
    • From Bootstrap to Tailwind
    • Why utility-first won
    • Timeline of major shifts

CSS-in-JS Libraries

  • styled-components - Write CSS in JS
    • Dynamic styling with props
    • Scoped to components
    • Popular in React ecosystem

1. Tailwind Dominance

Tailwind CSS has become the default choice:

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Click me
</button>

Why it won:

  • Faster development
  • Smaller bundles (after purge)
  • No naming fatigue
  • Great DX with IntelliSense

2. Zero-Runtime CSS-in-JS

Compile-time CSS-in-JS alternatives:

  • vanilla-extract - Type-safe CSS
  • Linaria - Zero-runtime CSS-in-JS
  • Panda CSS - Zero-runtime utility framework

Benefits:

  • No runtime overhead
  • Better performance
  • Type safety
  • Smaller bundles

3. Native CSS Features

Modern CSS has built-in features that frameworks used to provide:

CSS Variables:

:root {
  --primary-color: #0066cc;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

CSS Nesting (2023+):

.card {
  padding: 1rem;

  & h2 {
    color: #333;
  }

  &:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
}

Container Queries (2023+):

@container (min-width: 700px) {
  .card {
    display: grid;
  }
}

Choosing a Styling Approach

For New Projects

Recommended (2024):

  1. Tailwind CSS - Best all-around choice

    • Fast development
    • Small bundles
    • Great ecosystem

  2. CSS Modules - If you prefer traditional CSS

    • Scoped styles
    • No new syntax to learn
    • Built into most frameworks

For Existing Projects

If using:

Decision Matrix

Approach Bundle Size DX Performance Learning Curve
Tailwind Small (3-10KB) Excellent Excellent Moderate
CSS Modules Minimal Good Excellent Easy
styled-components Medium (16KB) Excellent Good Moderate
Bootstrap Large (150KB+) Good Fair Easy
Plain CSS Minimal Fair Excellent Easy

Preprocessors

Sass/SCSS

Still widely used for legacy projects:

$primary-color: #0066cc;

.button {
  background: $primary-color;
  padding: 1rem;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

When to use:

  • Legacy projects
  • When variables and nesting are needed (before native CSS support)
  • Teams familiar with Sass

Less

Similar to Sass, less popular:

@primary-color: #0066cc;

.button {
  background: @primary-color;
  padding: 1rem;

  &:hover {
    background: darken(@primary-color, 10%);
  }
}

Build Tools

PostCSS

CSS transformation tool used by most modern frameworks:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

What it does:

  • Adds vendor prefixes
  • Transforms modern CSS to older syntax
  • Enables plugins like Tailwind
  • Optimizes and minifies CSS

Lightning CSS

Rust-based CSS processor (faster than PostCSS):

  • Extremely fast
  • Built-in transformations
  • Used by some modern frameworks

Design Systems

Component Libraries

React:

  • Material-UI (MUI)
  • Chakra UI
  • Ant Design
  • shadcn/ui (with Tailwind)

Vue:

  • Vuetify
  • Quasar
  • PrimeVue

Angular:

  • Angular Material
  • PrimeNG

Framework-agnostic:

  • DaisyUI (Tailwind components)
  • Flowbite (Tailwind components)

Custom Design Systems

Many companies build their own:

/* Design tokens */
:root {
  /* Colors */
  --color-primary: #0066cc;
  --color-secondary: #6c757d;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  /* Typography */
  --font-sans: system-ui, sans-serif;
  --font-mono: 'Courier New', monospace;
}

Best Practices

1. Use a Design System

Don't reinvent spacing, colors, etc:

/* ✓ Good - consistent */
.button {
  padding: var(--space-md);
  background: var(--color-primary);
}

/* ❌ Bad - magic numbers */
.button {
  padding: 13px 17px;
  background: #0065cb;
}

2. Scope Styles

Prevent naming conflicts:

3. Optimize for Production

  • Remove unused CSS
  • Minify CSS files
  • Use critical CSS
  • Lazy load non-critical styles

4. Mobile-First

Write styles for mobile, then add desktop:

/* Mobile first */
.container {
  padding: 1rem;
}

/* Desktop */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

Learning Resources

General CSS

  • MDN Web Docs: Comprehensive CSS reference
  • CSS-Tricks: Tutorials and guides
  • Can I Use: Browser compatibility

Specific Topics

Key Takeaways

  • Tailwind CSS is the modern standard for most projects
  • CSS Modules are great for traditional CSS lovers
  • Bootstrap is legacy but still useful for prototypes
  • styled-components are being replaced by zero-runtime alternatives
  • Native CSS is getting powerful (variables, nesting, container queries)
  • Choose based on project needs, not just popularity

The CSS landscape has evolved from simple stylesheets to sophisticated build systems and frameworks. While options abound, most modern projects converge on Tailwind CSS for its developer experience and performance. Understanding the history and trade-offs helps you choose the right approach for your project.

Last updated: October 16, 2025