The layered architecture of ITCSS

ITCSS is a scalable and maintainable CSS architecture methodology proposed by Harry Roberts. It organizes CSS code through a layered approach, addressing specificity conflicts and code redundancy issues in traditional CSS. This architecture divides stylesheets into multiple layers, each with clear responsibilities and priorities.

Core Layered Structure of ITCSS

ITCSS adopts an inverted pyramid structure, comprising seven main layers with gradually increasing specificity from top to bottom:

1. Settings
2. Tools
3. Generic
4. Elements
5. Objects
6. Components
7. Utilities

// Example ITCSS file structure
stylesheets/
├── settings/       // Variables and configurations
├── tools/          // Mixins and functions
├── generic/        // Resets and normalizations
├── elements/       // Native HTML elements
├── objects/        // Design patterns
├── components/     // UI components
├── utilities/      // Helper classes

Settings Layer: Global Variables

This layer contains all global variable definitions for the project, typically using preprocessor variables like Sass or Less. Variable names should be semantic to facilitate team collaboration.

// _settings.colors.scss
$color-primary: #3a86ff;
$color-secondary: #8338ec;
$color-danger: #ff006e;

// _settings.typography.scss
$font-size-base: 16px;
$font-family-sans: 'Helvetica Neue', Arial, sans-serif;

Tools Layer: Mixins and Functions

The Tools layer includes reusable functions and mixins that do not directly output CSS but provide functional support for other layers. Typical examples include media query mixins and calculation functions.

// _tools.mixins.scss
@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// _tools.functions.scss
@function em($pixels, $context: $font-size-base) {
  @return ($pixels / $context) * 1em;
}

Generic Layer: Resets and Normalizations

This layer handles browser default style resets and normalizations to ensure cross-browser consistency. Common practices include using normalize.css or custom reset rules.

// _generic.reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// _generic.normalize.scss
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

Elements Layer: HTML Element Styles

The Elements layer provides base styles for native HTML elements without any class selectors. This layer defines the "default" appearance of elements.

// _elements.headings.scss
h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

// _elements.forms.scss
input[type="text"] {
  border: 1px solid #ccc;
  padding: 0.5em;
}

Objects Layer: Design Patterns

The Objects layer defines reusable design patterns and layout structures using class selectors. These objects should be content-agnostic and devoid of decorative styles.

// _objects.media.scss
.o-media {
  display: flex;
  align-items: flex-start;
}

.o-media__body {
  flex: 1;
}

// _objects.layout.scss
.o-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

Components Layer: UI Components

This is a high-specificity layer in ITCSS, containing specific UI component styles. Each component should have an independent file, maintaining high cohesion and low coupling.

// _components.button.scss
.c-button {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: $color-primary;
  color: white;
  
  &--secondary {
    background: $color-secondary;
  }
}

// _components.card.scss
.c-card {
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  
  &__header {
    padding: 1rem;
    background: #f5f5f5;
  }
}

Utilities Layer: Helper Classes

The Utilities layer contains helper classes with the highest specificity, often using !important declarations to ensure they override other styles. These classes should have a single responsibility.

// _utilities.spacing.scss
.u-mt-1 { margin-top: 1rem !important; }
.u-mb-2 { margin-bottom: 2rem !important; }

// _utilities.display.scss
.u-hidden { display: none !important; }
.u-flex { display: flex !important; }

Practical Example of ITCSS

The following is a complete page structure example demonstrating how the layers work together:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="settings/colors.css">
  <link rel="stylesheet" href="tools/mixins.css">
  <link rel="stylesheet" href="generic/reset.css">
  <link rel="stylesheet" href="elements/headings.css">
  <link rel="stylesheet" href="objects/layout.css">
  <link rel="stylesheet" href="components/card.css">
  <link rel="stylesheet" href="utilities/spacing.css">
</head>
<body class="o-container">
  <div class="c-card u-mt-2">
    <h1>ITCSS Example</h1>
    <button class="c-button c-button--secondary">Click Me</button>
  </div>
</body>
</html>

Combining ITCSS with BEM

ITCSS is often combined with the BEM naming convention, particularly in the Components layer. This combination creates a more predictable and maintainable CSS architecture.

// BEM + ITCSS Example
.c-accordion { /* Block */ }
.c-accordion__item { /* Element */ }
.c-accordion--expanded { /* Modifier */ }

Compilation Order in ITCSS

During the build process, layer files must be compiled in a specific order to ensure proper cascading. A typical Sass import order is as follows:

// main.scss
@import 'settings/*';
@import 'tools/*';
@import 'generic/*';
@import 'elements/*';
@import 'objects/*';
@import 'components/*';
@import 'utilities/*';

Performance Optimization with ITCSS

By rationally organizing the ITCSS structure, better performance can be achieved:

1. Combine Settings and Tools layers into a single vendor.css file
2. Inline Generic and Elements layers in the HTML head
3. Load Components layer styles on demand
4. Optimize the Utilities layer with PurgeCSS

// Example webpack configuration
{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, 'src/styles/settings'),
            path.resolve(__dirname, 'src/styles/tools')
          ]
        }
      }
    }
  ]
}

Extensions and Variants of ITCSS

The standard ITCSS structure can be adjusted based on project requirements:

1. Add a Themes layer for theme styles
2. Introduce a Vendors layer for third-party styles
3. Create a Pages layer for page-specific styles
4. Add a States layer for state classes

// Extended structure
stylesheets/
├── vendors/
├── themes/
├── pages/
├── states/
├── ...Standard ITCSS layers

ITCSS in Large-Scale Projects

When applying ITCSS in large projects, the following strategies are recommended:

1. Create separate Components directories for each major feature module
2. Use namespaces to avoid conflicts (e.g., c-feature-component)
3. Establish strict style linting rules
4. Automate style documentation generation

// Large project structure example
stylesheets/
├── components/
│   ├── auth/
│   ├── dashboard/
│   ├── admin/
│   └── shared/

Version Control Strategy for ITCSS

A sound Git strategy is crucial for maintaining the ITCSS architecture:

1. Treat changes to Settings and Tools layers as major updates
2. Changes to Generic and Elements layers require cross-team review
3. Allow independent development of the Components layer
4. Utilities layer changes should pass automated CI tests

# Example git workflow
git checkout -b feature/update-button-styles
# Modify components/button.scss
git commit -m "Update button hover states"
git push origin feature/update-button-styles