CSS Organization and Best Practices

The Importance of Organized CSS

Welcome to our exploration of CSS organization and best practices! Now that we've covered the fundamentals of CSS, we need to address an equally important aspect: how to structure and maintain your styles as projects grow in complexity.

One of the biggest challenges in web development isn't writing CSS that works—it's writing CSS that continues to work as your project evolves. Poorly organized CSS quickly becomes difficult to maintain, leading to inconsistencies, specificity conflicts, and the dreaded "CSS specificity wars" where developers add increasingly specific selectors just to override existing styles.

In this session, we'll explore methodologies, techniques, and tools to help you write clean, maintainable CSS. We'll discuss naming conventions, file organization, and best practices that will serve you well in both small personal projects and large team environments.

File Organization

For today's session, we'll use the following files:

CSS Folder: styles/ in your project root
Example Stylesheet: styles/organization_examples.css
HTML File: css_organization.html in your project root

Make sure to create these files and link them properly before we begin the exercises.

Common CSS Organization Problems

Before diving into solutions, let's understand the common problems that arise in CSS codebases:

The Specificity Problem

CSS specificity determines which styles are applied when multiple rules target the same element. When specificity isn't managed well, you end up with:

Overriding styles with increasingly specific selectors
Excessive use of !important
Difficulty predicting which styles will be applied
CSS that's hard to refactor or modify

/* Specificity war example */
.sidebar .nav li a { color: blue; }
.sidebar .nav li a.active { color: red; }

/* Later in the codebase... */
.sidebar .nav li a { color: green !important; } /* Now we've broken the active style */

/* And later still... */
.sidebar .nav li a.active { color: orange !important; } /* Fighting fire with fire */

Real-world analogy: Think of specificity like authority in a workplace. If a manager (class) and a VP (ID) give conflicting instructions, the VP's instructions take precedence. If multiple managers give conflicting instructions, the one with the most specific authority over your role wins. When everyone starts shouting "This is important!" (!important), chaos ensues.

The Global Scope Problem

CSS operates in a global scope by default, which means:

Styles defined for one component can accidentally affect others
Class names must be unique across the entire project
It's difficult to know if changing a style will have unintended consequences

/* Global scope problem example */
/* In navigation.css */
.card {
    border: 1px solid #ddd;
    padding: 15px;
}

/* In features.css - developer doesn't know .card is already used */
.card {
    display: flex;
    background: #f5f5f5;
    /* Now all cards in the site are affected, not just feature cards */
}

Real-world analogy: Imagine a city where every resident must have a completely unique name. As the city grows, naming new babies becomes increasingly difficult, and calling out someone's name might accidentally summon multiple people from across town.

The Maintainability Problem

As projects grow, CSS codebases face maintainability challenges:

Developers afraid to remove CSS in case it's still used somewhere
"Just in case" CSS that's duplicated rather than reused
Growing file sizes that affect performance
Inconsistent design patterns implemented differently across the site

/* Maintainability problem example */
/* Is this used anywhere? Better not delete it... */
.legacy-component {
    /* 50 lines of CSS that might be important */
}

/* New component - not sure if there's a utility for this */
.new-component {
    /* Duplicates 30 lines from the legacy component */
}

Real-world analogy: It's like a garage where nothing gets thrown away because "we might need it someday." Eventually, finding what you actually need becomes impossible, and you start buying duplicates rather than searching through the clutter.

CSS Organization Methodologies

Over the years, developers have created methodologies to address CSS organization challenges. Let's explore the most influential ones:

OOCSS (Object Oriented CSS)

OOCSS, developed by Nicole Sullivan, focuses on two main principles:

Separation of structure from skin: Define reusable visual patterns independent of structural ones
Separation of container from content: An element should look the same regardless of its location

/* OOCSS Example */
/* Structure */
.btn {
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 4px;
}

/* Skin */
.btn-primary {
    background-color: #0066cc;
    color: white;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

/* Usage */
<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-secondary">Secondary Action</button>

Key benefit: Encourages reuse and reduces duplication by creating composable classes. Components can mix and match various "skins" while maintaining the same structure.

BEM (Block, Element, Modifier)

BEM, developed by Yandex, is a naming convention methodology that creates namespaced class names:

Block: Standalone component that is meaningful on its own (e.g., .card)
Element: A part of a block with no standalone meaning (e.g., .card__title)
Modifier: A variant or extension of a block or element (e.g., .card--featured)

/* BEM Example */
/* Block */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
}

/* Elements */
.card__title {
    font-size: 1.2rem;
    margin-top: 0;
}

.card__image {
    width: 100%;
    height: auto;
}

.card__content {
    margin-top: 15px;
}

/* Modifiers */
.card--featured {
    border-color: #0066cc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Usage */
<div class="card card--featured">
    <h2 class="card__title">Card Title</h2>
    <img class="card__image" src="image.jpg" alt="">
    <div class="card__content">
        Card content here...
    </div>
</div>

Key benefit: Classes clearly communicate their purpose and relationship, reducing naming conflicts and making the structure of components explicit in the markup.

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS, developed by Jonathan Snook, categorizes CSS rules into five types:

Base: Default styles for HTML elements (no classes or IDs)
Layout: Major layout components that divide the page into sections
Module: Reusable, modular components
State: Describes how modules or layouts look in a particular state
Theme: Visual appearance that can be swapped (colors, fonts, etc.)

/* SMACSS Example */
/* Base */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Layout */
.l-header {
    height: 60px;
}

.l-sidebar {
    width: 25%;
    float: left;
}

.l-main {
    width: 75%;
    float: right;
}

/* Module */
.nav {
    list-style: none;
}

.nav-item {
    display: inline-block;
}

/* State */
.is-active {
    font-weight: bold;
}

.is-hidden {
    display: none;
}

/* Theme */
.theme-dark {
    background-color: #333;
    color: white;
}

Key benefit: Provides a clear structure for organizing CSS files and helps developers decide where new styles should go.

Atomic CSS / Utility-First CSS

Atomic CSS (popularized by frameworks like Tailwind CSS) creates small, single-purpose utility classes:

Each class typically does one thing
Composed in HTML rather than in CSS
Results in very little CSS but more classes in the HTML

/* Atomic CSS Example */
/* Utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.p-4 { padding: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: bold; }
.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: white; }
.rounded { border-radius: 0.25rem; }

/* Usage */
<div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded">
    <h2 class="text-lg font-bold mb-2">Notification</h2>
    <button>Dismiss</button>
</div>

Key benefit: Reduces CSS file size by promoting reuse and eliminates the need to create and name custom components for every UI pattern.

CSS Modules and Scoped CSS

Modern tooling has enabled component-scoped CSS, where styles are automatically namespaced:

Used in component-based frameworks (React, Vue, etc.)
Solves the global scope problem by automatically generating unique class names
Allows developers to write simple CSS without naming conflicts

/* CSS Modules Example (React) */
/* In Button.module.css */
.button {
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
}

.primary {
    background-color: #0066cc;
    color: white;
}

/* In Button.jsx */
import styles from './Button.module.css';

function Button() {
    return (
        <button className={`${styles.button} ${styles.primary}`}>
            Click Me
        </button>
    );
}

/* Compiled HTML might look like */
<button class="Button_button_1a2b3c Button_primary_4d5e6f">
    Click Me
</button>

Key benefit: Eliminates the global scope problem without requiring complex naming conventions, as the tool handles namespacing automatically.

CSS File Organization

Beyond code structure, how you organize your CSS files matters too. Here are different approaches:

Single File Approach

For small projects, a single CSS file may be sufficient:

Pros: Simple to manage, only one HTTP request
Cons: Can become unwieldy as the project grows

By Page/Template

Organize CSS by the pages or templates that use them:

Pros: Clear connection between files and views
Cons: Potential for duplication, unclear where shared styles should go

/* File organization by page */
/styles
    /main.css        /* Shared styles */
    /home.css        /* Homepage-specific styles */
    /about.css       /* About page styles */
    /product.css     /* Product page styles */
    /contact.css     /* Contact page styles */

By Component

Each UI component gets its own CSS file:

Pros: Modular, easy to find component styles
Cons: Can lead to many small files, harder to see the big picture

/* File organization by component */
/styles
    /components
        /button.css
        /card.css
        /navigation.css
        /form.css
        /modal.css
    /layouts
        /header.css
        /footer.css
        /sidebar.css
    /main.css        /* Base styles */

By Function (SMACSS-inspired)

Group CSS files by their functional role:

Pros: Clear separation of concerns, scalable
Cons: May not align with component-based development

/* Function-based organization */
/styles
    /base            /* Base element styles */
        /reset.css
        /typography.css
    /layout          /* Major layout components */
        /grid.css
        /header.css
        /footer.css
    /modules         /* Reusable components */
        /buttons.css
        /forms.css
        /cards.css
    /state           /* State modifications */
        /states.css
    /themes          /* Theme variations */
        /light.css
        /dark.css
    /utilities       /* Utility classes */
        /spacing.css
        /colors.css
    /vendor          /* Third-party styles */
        /normalize.css
        /plugin.css
    /main.css        /* Imports all files */

Using a Preprocessor

CSS preprocessors like Sass or LESS allow more flexible file organization with partials and imports:

/* Sass partial structure example */
/scss
    /abstracts
        /_variables.scss    /* Variables */
        /_mixins.scss       /* Mixins and functions */
    /base
        /_reset.scss        /* Reset/normalize */
        /_typography.scss   /* Typography rules */
    /components
        /_buttons.scss      /* Buttons */
        /_cards.scss        /* Cards */
    /layout
        /_header.scss       /* Header */
        /_grid.scss         /* Grid system */
        /_footer.scss       /* Footer */
    /pages
        /_home.scss         /* Home-specific styles */
        /_about.scss        /* About-specific styles */
    /themes
        /_theme.scss        /* Default theme */
        /_admin.scss        /* Admin theme */
    /vendors
        /_bootstrap.scss    /* Bootstrap customizations */
    main.scss               /* Main file that imports all partials */

Real-world analogy: Think of a well-organized filing cabinet. You want to be able to find what you need quickly, but you also want to store related documents together. Different projects might need different organizational systems based on their size and complexity.

CSS Best Practices

Regardless of which methodology you choose, these best practices will help keep your CSS maintainable:

Follow a Consistent Naming Convention

Consistent naming makes code more predictable and easier to understand:

Choose a naming convention (BEM, SMACSS, etc.) and stick with it
Use meaningful, descriptive names
Consider using prefixes for different types of classes

/* Examples of good naming */
/* Component */
.user-profile { }

/* State */
.is-active { }
.has-error { }

/* JavaScript hooks */
.js-dropdown-toggle { }

/* Utilities */
.u-text-center { }
.u-margin-top { }

Avoid Deep Nesting

Deep selector nesting creates overly specific CSS that's hard to override:

/* Bad: Deep nesting */
.header .nav ul li a {
    color: blue;
}

/* Better: Flatter selectors */
.nav-link {
    color: blue;
}

Rule of thumb: If you're nesting more than 2-3 levels deep, you probably need to reconsider your approach.

Use Classes, Not IDs for Styling

IDs have higher specificity, which can lead to specificity issues:

Use classes for styling elements
Reserve IDs for JavaScript hooks and anchor links

/* Avoid: Using IDs for styling */
#header {
    background-color: #333;
}

/* Better: Using classes for styling */
.header {
    background-color: #333;
}

Create Consistent Patterns

Consistent patterns make your CSS more predictable:

Use the same approach for similar components
Create design tokens for colors, spacing, typography, etc.
Establish naming patterns for related classes

/* Design tokens for consistency */
:root {
    /* Colors */
    --color-primary: #0066cc;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    
    /* Spacing */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    
    /* Typography */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.25rem;   /* 20px */
    --font-size-xl: 1.5rem;    /* 24px */
    
    /* Border radius */
    --border-radius-sm: 0.25rem;  /* 4px */
    --border-radius-md: 0.5rem;   /* 8px */
    --border-radius-lg: 1rem;     /* 16px */
}

Mobile-First Approach

Write your base styles for mobile devices, then use media queries to enhance for larger screens:

/* Mobile-first approach */
.card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Tablet and larger */
@media (min-width: 768px) {
    .card {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
}

DRY (Don't Repeat Yourself)

Avoid duplicate code by creating reusable components and utilities:

/* Instead of repeating this everywhere */
.feature-title {
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 1rem;
}

.sidebar-title {
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 1rem;
}

/* Create a reusable class */
.heading {
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 1rem;
}

Avoid !important

!important breaks the natural cascading of styles and leads to specificity wars:

Use proper selector specificity instead
Refactor overly specific selectors
Reserve !important for utility classes that must always win

/* Avoid this */
.element { color: red !important; }

/* Instead, use more specific selectors */
.parent .element { color: red; }

/* Or better yet, use class combinations */
.element.highlight { color: red; }

Use Shorthand Properties Wisely

Shorthand properties can inadvertently override other styles:

/* Might accidentally reset other properties */
.element {
    background: blue;  /* Resets background-image, background-position, etc. */
    margin: 20px;      /* Sets all four margins */
}

/* More explicit and safer */
.element {
    background-color: blue;
    margin-top: 20px;
}

Consider Print Styles

Don't forget about print styles for documents that may be printed:

/* Basic print styles */
@media print {
    /* Hide navigation and interactive elements */
    .navigation, .sidebar, .footer, button, .ad {
        display: none;
    }
    
    /* Ensure text is readable */
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    /* Make links more useful in print */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

Documenting Your CSS

Documentation is a key part of maintainable CSS, especially for team projects:

Comment Your Code

Well-commented CSS helps other developers (including your future self) understand your intentions:

/* 
 * Primary Button
 * Used for primary actions throughout the site
 * Usage: <button class="btn btn-primary">Button Text</button>
 */
.btn {
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

/* Primary variant with brand colors */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

/* Secondary variant with muted appearance */
.btn-secondary {
    background-color: var(--color-secondary);
    color: white;
}

Create a Style Guide or Pattern Library

A living style guide documents all your components and design patterns in one place:

Shows all UI components with examples and code
Documents usage guidelines and variations
Serves as a single source of truth for the design system
Can be built with tools like Storybook, Pattern Lab, or custom solutions

Document Your Methodology

Document your CSS approach for team members:

Explain the chosen methodology and why it was selected
Provide naming conventions with examples
Document the file structure and organization
Include guidelines for adding new styles

/* Example of a CSS methodology documentation comment */
/**
 * PROJECT CSS METHODOLOGY
 * 
 * This project uses BEM (Block Element Modifier) for CSS organization.
 * 
 * NAMING CONVENTION:
 * .block {}                    /* Standalone component */
 * .block__element {}           /* Child of the block */
 * .block--modifier {}          /* Variant of the block */
 * 
 * EXAMPLES:
 * .card {}                     /* A card component */
 * .card__title {}              /* The title within a card */
 * .card--featured {}           /* A featured variant of the card */
 * 
 * FILE ORGANIZATION:
 * - base/            Base styles and resets
 * - components/      Individual UI components
 * - layouts/         Major layout components
 * - utilities/       Helper classes
 * - pages/           Page-specific styles
 */

Maintaining CSS Over Time

CSS maintenance becomes crucial as projects evolve:

Regular Code Reviews

Regular CSS code reviews help maintain quality:

Check that new CSS follows project conventions
Look for potential duplications or optimization opportunities
Ensure responsive behavior works as expected
Review for accessibility considerations

Refactoring Strategies

Approaches to refactoring existing CSS codebases:

Strangler Pattern: Gradually replace old CSS with new patterns, one component at a time
Parallel Stylesheets: Create new stylesheets alongside legacy ones, with clear boundaries
CSS Modules/Scoped CSS: Isolate new components with modern tooling
Utility-First Conversion: Gradually adopt utility classes for new components

/* Example of strangler pattern with namespacing */
/* Legacy CSS (untouched) */
.button {
    /* Old button styles */
}

/* New CSS (with namespace to avoid conflicts) */
.new-button {
    /* New button styles */
}

Managing CSS Size

As projects grow, managing CSS file size becomes important:

Remove unused CSS with tools like PurgeCSS
Consider code splitting to load only necessary CSS
Avoid duplicating styles across files
Use minification and compression in production

Deprecated Styles

Handling deprecated styles helps with transitions:

/* Marking deprecated styles */
/**
 * @deprecated Since version 2.0.0
 * Use .new-component instead.
 * Will be removed in version 3.0.0
 */
.old-component {
    /* Styles maintained for backward compatibility */
}

CSS Performance Considerations

CSS organization affects not just maintainability but also performance:

Selector Performance

While modern browsers have optimized CSS selector performance, best practices still matter:

Avoid unnecessarily complex selectors
Be cautious with universal selectors (*) and expensive pseudo-classes
Remember that browsers read selectors from right to left

/* Less efficient selector (browser must check all div elements) */
div.specific-class { }

/* More efficient selector (browser can quickly identify by class) */
.specific-class { }

Critical CSS

Critical CSS is the minimum CSS needed to render above-the-fold content:

Inline critical CSS in the <head> for faster initial render
Load non-critical CSS asynchronously
Tools like Critical or CriticalCSS can help extract critical CSS

/* Critical CSS approach */
<head>
    <style>
        /* Critical CSS inlined */
        body { font-family: sans-serif; margin: 0; }
        .header { background: white; height: 60px; }
        .hero { height: 500px; background: #f5f5f5; }
    </style>
    
    <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
</head>

CSS File Size and Loading

Optimize CSS delivery for better performance:

Minify CSS files to remove comments and whitespace
Consider code splitting to load CSS per page or component
Use HTTP/2 to load multiple small files efficiently
Enable compression (gzip or Brotli) on your server

/* Example CSS code splitting (conceptual) */
// Base CSS loaded on all pages
import '../styles/base.css';

// Component CSS loaded only when needed
if (document.querySelector('.carousel')) {
    import('../styles/components/carousel.css');
}

Animation Performance

Certain CSS properties are more performance-friendly for animations:

Stick to transform and opacity for smooth animations
Avoid animating properties that trigger layout recalculations (like width, height, or position)
Use will-change judiciously for important animations

/* Performance-friendly animation */
.menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.menu.open {
    transform: translateX(0);
}

/* Less performant animation */
.menu {
    left: -100%;
    transition: left 0.3s ease;
}

.menu.open {
    left: 0;
}

Tools for Better CSS Organization

Modern tools can help you maintain clean, organized CSS:

CSS Preprocessors

Preprocessors like Sass, LESS, and Stylus enhance CSS capabilities:

Variables for consistent values
Nesting for more intuitive selector organization
Mixins and functions for reusable code
Partials and imports for better file organization

/* Sass example */
// Variables
$primary-color: #0066cc;
$border-radius: 4px;

// Mixin
@mixin button-style($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    padding: 0.5em 1em;
    border-radius: $border-radius;
    border: none;
    cursor: pointer;
    
    &:hover {
        background-color: darken($bg-color, 10%);
    }
}

// Usage
.button-primary {
    @include button-style($primary-color, white);
}

.button-secondary {
    @include button-style(#6c757d, white);
}

PostCSS

PostCSS is a tool for transforming CSS with JavaScript plugins:

Autoprefixer for automatic vendor prefixes
PostCSS Preset Env for using future CSS features
CSS Modules for component-scoped styles
PurgeCSS for removing unused CSS

/* postcss.config.js example */
module.exports = {
    plugins: [
        require('autoprefixer'),
        require('postcss-preset-env')({
            stage: 3,
            features: {
                'nesting-rules': true,
                'custom-properties': true,
                'color-mod-function': true
            }
        }),
        process.env.NODE_ENV === 'production' 
            ? require('@fullhuman/postcss-purgecss')({
                content: ['./src/**/*.html', './src/**/*.js'],
                defaultExtractor: content => content.match(/[\w-/:]+(?


            
            CSS-in-JS
            CSS-in-JS solutions like styled-components, Emotion, and JSS:
            
                Component-scoped styles with no naming conflicts
                Dynamic styling based on props or state
                Automatic critical CSS extraction
                Style sharing and reuse through JavaScript
            
            
            /* styled-components example (React) */
import styled from 'styled-components';

const Button = styled.button`
    background-color: ${props => props.primary ? '#0066cc' : '#6c757d'};
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    
    &:hover {
        background-color: ${props => props.primary ? '#0055aa' : '#5a6268'};
    }
`;

// Usage
function App() {
    return (
        <div>
            <Button primary>Primary Button</Button>
            <Button>Secondary Button</Button>
        </div>
    );
}
            
            Linting and Formatting
            CSS linters and formatters help maintain code quality:
            
                Stylelint for identifying and fixing CSS issues
                Prettier for consistent formatting
                CSS Stats for analyzing CSS complexity
            
            
            /* .stylelintrc example */
{
    "extends": "stylelint-config-standard",
    "plugins": ["stylelint-order"],
    "rules": {
        "indentation": 4,
        "color-hex-case": "lower",
        "color-hex-length": "short",
        "max-empty-lines": 1,
        "order/properties-alphabetical-order": true
    }
}



        
            Hands-On Exercise: Refactoring CSS
            Let's apply what we've learned by refactoring some disorganized CSS into a more maintainable structure.
            
            Starting CSS (Problematic)
            /* Disorganized CSS to refactor */
#header {
    background-color: #333;
    padding: 10px;
}

#header .logo {
    color: white;
    font-size: 24px;
    font-weight: bold;
}

#header ul {
    list-style: none;
    float: right;
}

#header ul li {
    display: inline-block;
    margin-left: 20px;
}

#header ul li a {
    color: white;
    text-decoration: none;
}

#header ul li a:hover {
    color: #ddd;
}

.box {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.box.blue {
    background-color: #e6f7ff;
    border-color: #91d5ff;
}

.box.green {
    background-color: #f6ffed;
    border-color: #b7eb8f;
}

.box h3 {
    margin-top: 0;
    color: #333;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0066cc;
    color: white;
    border-radius: 4px;
    text-decoration: none;
}

.large-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #0066cc;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 18px;
}

.secondary-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #6c757d;
    color: white;
    border-radius: 4px;
    text-decoration: none;
}
            
            Refactored CSS (Using BEM)
            /* Refactored with BEM methodology */
/* Variables */
:root {
    --color-primary: #0066cc;
    --color-secondary: #6c757d;
    --color-text: #333;
    --color-border: #ddd;
    --color-white: white;
    --color-light-bg: #f9f9f9;
    --color-blue-light: #e6f7ff;
    --color-blue-border: #91d5ff;
    --color-green-light: #f6ffed;
    --color-green-border: #b7eb8f;
    
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    
    --border-radius: 4px;
}

/* Header component */
.header {
    background-color: var(--color-text);
    padding: var(--spacing-sm);
}

.header__logo {
    color: var(--color-white);
    font-size: 24px;
    font-weight: bold;
}

.header__nav {
    float: right;
    list-style: none;
}

.header__nav-item {
    display: inline-block;
    margin-left: var(--spacing-md);
}

.header__nav-link {
    color: var(--color-white);
    text-decoration: none;
}

.header__nav-link:hover {
    color: #ddd;
}

/* Card component */
.card {
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--color-light-bg);
}

.card__heading {
    margin-top: 0;
    color: var(--color-text);
}

/* Card modifiers */
.card--blue {
    background-color: var(--color-blue-light);
    border-color: var(--color-blue-border);
}

.card--green {
    background-color: var(--color-green-light);
    border-color: var(--color-green-border);
}

/* Button component */
.button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    text-decoration: none;
}

/* Button modifiers */
.button--secondary {
    background-color: var(--color-secondary);
}

.button--large {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 18px;
}
            
            Refactored CSS (Using Utility Classes)
            /* Refactored with utility approach */
/* Variables */
:root {
    --color-primary: #0066cc;
    --color-secondary: #6c757d;
    --color-text: #333;
    --color-border: #ddd;
    --color-white: white;
    --color-light-bg: #f9f9f9;
    --color-blue-light: #e6f7ff;
    --color-blue-border: #91d5ff;
    --color-green-light: #f6ffed;
    --color-green-border: #b7eb8f;
}

/* Layout utilities */
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.float-right { float: right; }
.list-none { list-style: none; }

/* Spacing utilities */
.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.px-2 { padding-left: 20px; padding-right: 20px; }
.py-1 { padding-top: 10px; padding-bottom: 10px; }
.py-2 { padding-top: 15px; padding-bottom: 15px; }
.m-0 { margin: 0; }
.ml-2 { margin-left: 20px; }
.mb-2 { margin-bottom: 20px; }

/* Typography utilities */
.text-white { color: white; }
.text-dark { color: #333; }
.font-bold { font-weight: bold; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 24px; }
.no-underline { text-decoration: none; }

/* Border utilities */
.border { border: 1px solid #ddd; }
.border-blue { border-color: #91d5ff; }
.border-green { border-color: #b7eb8f; }
.rounded { border-radius: 4px; }

/* Background utilities */
.bg-dark { background-color: #333; }
.bg-primary { background-color: #0066cc; }
.bg-secondary { background-color: #6c757d; }
.bg-light { background-color: #f9f9f9; }
.bg-blue-light { background-color: #e6f7ff; }
.bg-green-light { background-color: #f6ffed; }

/* Component classes (minimal) */
.header {
    background-color: #333;
    padding: 10px;
}

.card {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0066cc;
    color: white;
    border-radius: 4px;
    text-decoration: none;
}
            
            Corresponding HTML Example
            <!-- HTML for BEM approach -->
<header class="header">
    <div class="header__logo">Site Name</div>
    <ul class="header__nav">
        <li class="header__nav-item"><a href="#" class="header__nav-link">Home</a></li>
        <li class="header__nav-item"><a href="#" class="header__nav-link">About</a></li>
        <li class="header__nav-item"><a href="#" class="header__nav-link">Contact</a></li>
    </ul>
</header>

<div class="card">
    <h3 class="card__heading">Standard Card</h3>
    <p>This is a standard card component.</p>
    <a href="#" class="button">Learn More</a>
</div>

<div class="card card--blue">
    <h3 class="card__heading">Blue Card</h3>
    <p>This is a blue variant of the card.</p>
    <a href="#" class="button button--large">Learn More</a>
</div>

<div class="card card--green">
    <h3 class="card__heading">Green Card</h3>
    <p>This is a green variant of the card.</p>
    <a href="#" class="button button--secondary">Learn More</a>
</div>

<!-- HTML for utility approach -->
<header class="bg-dark p-1 d-flex justify-between">
    <div class="text-white text-xl font-bold">Site Name</div>
    <ul class="list-none d-flex">
        <li class="ml-2"><a href="#" class="text-white no-underline">Home</a></li>
        <li class="ml-2"><a href="#" class="text-white no-underline">About</a></li>
        <li class="ml-2"><a href="#" class="text-white no-underline">Contact</a></li>
    </ul>
</header>

<div class="border rounded p-2 mb-2 bg-light">
    <h3 class="text-dark m-0">Standard Card</h3>
    <p>This is a standard card component.</p>
    <a href="#" class="d-inline-block py-1 px-2 bg-primary text-white rounded no-underline">Learn More</a>
</div>

<div class="border border-blue rounded p-2 mb-2 bg-blue-light">
    <h3 class="text-dark m-0">Blue Card</h3>
    <p>This is a blue variant of the card.</p>
    <a href="#" class="d-inline-block py-2 px-2 bg-primary text-white rounded no-underline text-lg">Learn More</a>
</div>

<div class="border border-green rounded p-2 mb-2 bg-green-light">
    <h3 class="text-dark m-0">Green Card</h3>
    <p>This is a green variant of the card.</p>
    <a href="#" class="d-inline-block py-1 px-2 bg-secondary text-white rounded no-underline">Learn More</a>
</div>
        

        
            Today's Assignment: CSS Organization Project
            Now it's your turn to apply what you've learned about CSS organization and best practices.
            
            Assignment Requirements:
            
                Choose a CSS organization methodology (BEM, SMACSS, utility-first, etc.) for this project
                Create a new directory structure for your CSS based on your chosen methodology
                Build a simple website with the following components:
                    
                        A header with navigation
                        A hero section
                        A features section with 3-4 feature cards
                        A testimonial section
                        A contact form
                        A footer
                    
                
                Implement your CSS following these principles:
                    
                        Create a variables/design tokens system
                        Follow a consistent naming convention
                        Use appropriate CSS organization techniques
                        Make the site responsive for mobile, tablet, and desktop
                        Add comprehensive comments explaining your organization approach
                    
                
                Create a simple style guide page that documents:
                    
                        Your color system
                        Typography styles
                        Common components and variations
                        Layout patterns
                    
                
            
            
            Bonus challenges:
            
                Implement multiple themes (light/dark mode)
                Create a utility class system
                Refactor an existing CSS codebase using your chosen methodology
                Implement print styles for your pages
                Create a documentation page explaining your CSS approach
            
            
            Submit your completed assignment by pushing your HTML and CSS files to your course repository.
        

        
            Wrapping Up
            Congratulations! You've now explored the principles and practices of CSS organization and maintainability.
            
            Key takeaways from today's session:
            
                CSS organization is crucial for maintainable projects, especially as they grow
                Different methodologies (BEM, SMACSS, utility-first, etc.) offer different approaches to solving the same problems
                Consistent naming, documentation, and structure make CSS more predictable and easier to work with
                Modern tools and techniques can help enforce good practices and prevent common issues
                There's no one-size-fits-all solution—choose approaches that fit your project's needs
                Organization affects not just maintainability but also performance and collaboration
            
            
            As your projects grow in complexity, the organization patterns you establish early on will pay dividends in maintainability and developer efficiency. While it might seem like extra work initially, well-organized CSS will save you countless hours of debugging and refactoring in the future.
            
            In our next session, we'll dive into the powerful world of CSS Flexbox, a modern layout system that makes creating complex arrangements much more intuitive.
            
            Any questions before we wrap up?