CSS Architecture and Methodologies

ITCSS (Inverted Triangle CSS)

ITCSS (Inverted Triangle CSS) is a methodology that focuses on organizing CSS in layers, following the principle of specificity. It uses an inverted triangle to represent the flow from low-specificity rules to high-specificity rules, helping avoid specificity issues.

ITCSS Layers:

Settings: Global variables like colors and font sizes.
Tools: Mixins, functions, and other utilities.
Generic: Reset styles (e.g., normalize.css).
Elements: Base styles for HTML elements (e.g., h1, p).
Objects: Generic reusable layout components.
Components: Specific UI components (e.g., header, card).
Trumps: Highly specific styles (e.g., utility classes, overrides).

Example:

/* Settings */
$primary-color: #3498db;
$font-size-base: 16px;

/* Tools */
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* Generic */
* {
  box-sizing: border-box;
}

/* Elements */
h1 {
  font-size: 2rem;
}

/* Objects */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Components */
.card {
  padding: 20px;
  background-color: #f9f9f9;
}

/* Trumps */
.u-hidden {
  display: none !important;
}

In this example, ITCSS helps to layer styles in a predictable, scalable way, reducing specificity issues.

Key Benefits of ITCSS:

Scalability: Helps large projects stay organized with a clear structure.
Avoids Specificity Problems: By placing low-specificity rules at the top and high-specificity rules at the bottom, ITCSS minimizes specificity issues.
Modular and Maintainable: The layered approach makes it easier to maintain and modify styles.