ITCSS 🏗️
Inverted Triangle CSS - A scalable, maintainable architecture for large projects
What is ITCSS?
ITCSS (Inverted Triangle CSS) is a methodology that helps you organize your CSS in a way that better deals with the cascade and specificity. It takes a unique layered approach where styles are organized from generic to explicit.
🏗️ Structured Layers
7 distinct layers from generic to specific
📈 Scalable
Grows gracefully with your project
🎯 Predictable
Clear naming and organization
🛒 E-commerce Platform
ITCSS Layers in Action:
- Settings: Global variables, colors, typography
- Tools: Mixins, functions, reusable patterns
- Generic: Reset, normalize, box-sizing
- Elements: Basic HTML element styling
- Objects: Layout patterns, grids, containers
- Components: Specific UI components
- Utilities: Helper classes, overrides
E-commerce Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🛒 E-commerce Platform - ITCSS Architecture</title>
<style>
/* === 1. SETTINGS - Global variables, config === */
:root {
/* Colors */
--color-primary: #3498db;
--color-secondary: #2ecc71;
--color-accent: #e74c3c;
--color-text: #2c3e50;
--color-text-light: #7f8c8d;
--color-background: #ffffff;
--color-border: #ecf0f1;
/* Typography */
--font-family-base: 'Inter', system-ui, sans-serif;
--font-family-heading: 'Inter', system-ui, sans-serif;
--font-size-base: 16px;
--font-weight-normal: 400;
--font-weight-bold: 600;
--line-height-base: 1.6;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
/* Border radius */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
/* Breakpoints */
--breakpoint-mobile: 480px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
}
/* === 2. TOOLS - Mixins, functions === */
@define-mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@define-mixin container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
@define-mixin responsive $breakpoint {
@media (min-width: $breakpoint) {
@mixin-content;
}
}
@define-mixin text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* === 3. GENERIC - Reset, normalize, box-sizing === */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
body {
font-family: var(--font-family-base);
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
}
/* === 4. ELEMENTS - Bare HTML elements === */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-bold);
line-height: 1.2;
margin-bottom: var(--spacing-md);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--color-accent);
}
button {
font-family: inherit;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
/* === 5. OBJECTS - Layout, structural patterns === */
.o-container {
@mixin container;
}
.o-grid {
display: grid;
gap: var(--spacing-md);
}
.o-grid--2cols {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.o-grid--3cols {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.o-flex {
display: flex;
}
.o-flex--center {
@mixin flex-center;
}
.o-flex--between {
display: flex;
justify-content: space-between;
align-items: center;
}
.o-section {
padding: var(--spacing-xl) 0;
}
/* === 6. COMPONENTS - Specific UI components === */
.c-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius-md);
font-weight: var(--font-weight-bold);
text-align: center;
transition: all 0.3s ease;
}
.c-button--primary {
background: var(--color-primary);
color: white;
}
.c-button--primary:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.c-button--secondary {
background: var(--color-secondary);
color: white;
}
.c-button--outline {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.c-card {
background: var(--color-background);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all 0.3s ease;
}
.c-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.c-card__image {
width: 100%;
height: 200px;
object-fit: cover;
}
.c-card__content {
padding: var(--spacing-lg);
}
.c-card__title {
font-size: 1.25rem;
margin-bottom: var(--spacing-sm);
}
.c-card__price {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-accent);
}
.c-nav {
background: var(--color-background);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
}
.c-nav__container {
@mixin container;
@mixin flex-between;
padding: var(--spacing-md) var(--spacing-md);
}
.c-nav__logo {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.c-nav__menu {
display: flex;
gap: var(--spacing-lg);
list-style: none;
}
.c-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: var(--spacing-xxl) 0;
}
.c-hero__title {
font-size: 3rem;
margin-bottom: var(--spacing-md);
}
.c-hero__subtitle {
font-size: 1.25rem;
margin-bottom: var(--spacing-xl);
opacity: 0.9;
}
/* === 7. UTILITIES - Helper classes, overrides === */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-mb-sm { margin-bottom: var(--spacing-sm); }
.u-mb-md { margin-bottom: var(--spacing-md); }
.u-mb-lg { margin-bottom: var(--spacing-lg); }
.u-mb-xl { margin-bottom: var(--spacing-xl); }
.u-mt-sm { margin-top: var(--spacing-sm); }
.u-mt-md { margin-top: var(--spacing-md); }
.u-mt-lg { margin-top: var(--spacing-lg); }
.u-hidden { display: none; }
.u-visible { display: block; }
.u-text-truncate { @mixin text-truncate; }
.u-full-width { width: 100%; }
.u-bg-primary { background: var(--color-primary); }
.u-bg-secondary { background: var(--color-secondary); }
.u-text-white { color: white; }
/* Responsive utilities */
@media (max-width: 768px) {
.u-hidden-mobile { display: none; }
.c-hero__title { font-size: 2rem; }
.c-nav__menu { gap: var(--spacing-md); }
}
/* Demo styles */
.demo-container {
padding: var(--spacing-xl);
background: #f8f9fa;
border-radius: var(--border-radius-lg);
margin: var(--spacing-lg) 0;
}
.layer-visual {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: var(--spacing-lg) 0;
}
.layer-item {
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
border-left: 4px solid;
}
.layer-settings { background: #e8f4fd; border-color: #3498db; }
.layer-tools { background: #e8f6f3; border-color: #2ecc71; }
.layer-generic { background: #fef9e7; border-color: #f39c12; }
.layer-elements { background: #fdedec; border-color: #e74c3c; }
.layer-objects { background: #f4ecf7; border-color: #9b59b6; }
.layer-components { background: #eaf2f8; border-color: #3498db; }
.layer-utilities { background: #e8f8f5; border-color: #1abc9c; }
</style>
</head>
<body>
<!-- 🎯 NAVIGATION COMPONENT -->
<nav class="c-nav">
<div class="c-nav__container">
<div class="c-nav__logo">🛒 ShopStyle</div>
<ul class="c-nav__menu">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- 🚀 HERO COMPONENT -->
<section class="c-hero">
<div class="o-container">
<h1 class="c-hero__title">Welcome to ShopStyle</h1>
<p class="c-hero__subtitle">Discover amazing products with incredible prices</p>
<button class="c-button c-button--primary">Start Shopping</button>
</div>
</section>
<!-- 📦 MAIN CONTENT -->
<main class="o-container o-section">
<h2 class="u-text-center u-mb-lg">Featured Products</h2>
<div class="o-grid o-grid--3cols">
<!-- PRODUCT CARD COMPONENT -->
<div class="c-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23667eea'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='24' fill='white' text-anchor='middle'%3EProduct Image%3C/text%3E%3C/svg%3E"
alt="Smart Watch" class="c-card__image">
<div class="c-card__content">
<h3 class="c-card__title">Smart Watch Pro</h3>
<p class="u-mb-md">Advanced fitness tracking and notifications</p>
<div class="o-flex o-flex--between">
<span class="c-card__price">$299</span>
<button class="c-button c-button--secondary">Add to Cart</button>
</div>
</div>
</div>
<div class="c-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%232ecc71'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='24' fill='white' text-anchor='middle'%3EProduct Image%3C/text%3E%3C/svg%3E"
alt="Wireless Earbuds" class="c-card__image">
<div class="c-card__content">
<h3 class="c-card__title">Wireless Earbuds</h3>
<p class="u-mb-md">Crystal clear sound with noise cancellation</p>
<div class="o-flex o-flex--between">
<span class="c-card__price">$199</span>
<button class="c-button c-button--secondary">Add to Cart</button>
</div>
</div>
</div>
<div class="c-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23e74c3c'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='24' fill='white' text-anchor='middle'%3EProduct Image%3C/text%3E%3C/svg%3E"
alt="Laptop Stand" class="c-card__image">
<div class="c-card__content">
<h3 class="c-card__title">Ergonomic Laptop Stand</h3>
<p class="u-mb-md">Improve your posture and workspace</p>
<div class="o-flex o-flex--between">
<span class="c-card__price">$89</span>
<button class="c-button c-button--secondary">Add to Cart</button>
</div>
</div>
</div>
</div>
</main>
<!-- 🏗️ ITCSS ARCHITECTURE VISUALIZATION -->
<section class="o-container o-section">
<div class="demo-container">
<h2 class="u-text-center u-mb-lg">🏗️ ITCSS Architecture Layers</h2>
<div class="layer-visual">
<div class="layer-item layer-settings">
<h3>1. Settings</h3>
<p><strong>Global variables:</strong> Colors, typography, spacing, breakpoints</p>
<code>:root { --color-primary: #3498db; --spacing-md: 1rem; }</code>
</div>
<div class="layer-item layer-tools">
<h3>2. Tools</h3>
<p><strong>Mixins and functions:</strong> Reusable code patterns</p>
<code>@define-mixin flex-center { display: flex; align-items: center; justify-content: center; }</code>
</div>
<div class="layer-item layer-generic">
<h3>3. Generic</h3>
<p><strong>Reset and normalize:</strong> Baseline styles, box-sizing</p>
<code>*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }</code>
</div>
<div class="layer-item layer-elements">
<h3>4. Elements</h3>
<p><strong>HTML elements:</strong> Typography, links, buttons, forms</p>
<code>h1 { font-size: 2.5rem; } a { color: var(--color-primary); }</code>
</div>
<div class="layer-item layer-objects">
<h3>5. Objects</h3>
<p><strong>Layout patterns:</strong> Grids, containers, media objects</p>
<code>.o-container { max-width: 1200px; margin: 0 auto; }</code>
</div>
<div class="layer-item layer-components">
<h3>6. Components</h3>
<p><strong>UI components:</strong> Buttons, cards, navigation, forms</p>
<code>.c-button { padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--border-radius-md); }</code>
</div>
<div class="layer-item layer-utilities">
<h3>7. Utilities</h3>
<p><strong>Helper classes:</strong> Margins, text alignment, visibility</p>
<code>.u-text-center { text-align: center; } .u-mb-md { margin-bottom: var(--spacing-md); }</code>
</div>
</div>
</div>
</section>
<!-- 🎯 UTILITIES DEMO -->
<section class="o-container o-section">
<h2 class="u-text-center u-mb-lg">🔧 Utilities in Action</h2>
<div class="o-grid o-grid--2cols">
<div class="demo-container">
<h3 class="u-text-center u-mb-md">Spacing Utilities</h3>
<div class="u-mb-sm" style="background: #3498db; color: white; padding: var(--spacing-sm);">.u-mb-sm</div>
<div class="u-mb-md" style="background: #2ecc71; color: white; padding: var(--spacing-sm);">.u-mb-md</div>
<div class="u-mb-lg" style="background: #e74c3c; color: white; padding: var(--spacing-sm);">.u-mb-lg</div>
</div>
<div class="demo-container">
<h3 class="u-text-center u-mb-md">Text Utilities</h3>
<p class="u-text-left u-mb-sm">.u-text-left - Left aligned text</p>
<p class="u-text-center u-mb-sm">.u-text-center - Center aligned text</p>
<p class="u-text-right">.u-text-right - Right aligned text</p>
</div>
</div>
</section>
</body>
</html>📝 Blog Platform
Naming Conventions
.c-Components (c-button, c-card).o-Objects (o-container, o-grid).u-Utilities (u-text-center, u-mb-md)Layer Benefits
🎯Specificity control
🚀Performance optimization
👥Team collaboration
Blog Platform Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📝 Blog Platform - ITCSS Architecture</title>
<style>
/* === 1. SETTINGS === */
:root {
/* Blog-specific colors */
--color-primary: #2c3e50;
--color-secondary: #3498db;
--color-accent: #e74c3c;
--color-success: #27ae60;
--color-warning: #f39c12;
--color-text: #2c3e50;
--color-text-light: #7f8c8d;
--color-background: #ffffff;
--color-background-alt: #f8f9fa;
--color-border: #ecf0f1;
/* Typography scale */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Spacing scale */
--spacing-xxs: 0.125rem;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
--spacing-xxxl: 4rem;
/* Layout */
--container-max-width: 1200px;
--container-padding: var(--spacing-md);
--section-spacing: var(--spacing-xxl);
/* Border radius */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
}
/* === 2. TOOLS === */
@define-mixin container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
@define-mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@define-mixin flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
@define-mixin text-style $size, $weight: var(--font-weight-normal) {
font-size: $size;
font-weight: $weight;
line-height: 1.4;
}
@define-mixin card-style {
background: var(--color-background);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
/* === 3. GENERIC === */
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: inherit;
}
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--color-text);
background: var(--color-background);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* === 4. ELEMENTS === */
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold);
line-height: 1.2;
margin-bottom: var(--spacing-md);
color: var(--color-primary);
}
h1 { @mixin text-style var(--font-size-4xl); }
h2 { @mixin text-style var(--font-size-3xl); }
h3 { @mixin text-style var(--font-size-2xl); }
h4 { @mixin text-style var(--font-size-xl); }
h5 { @mixin text-style var(--font-size-lg); }
h6 { @mixin text-style var(--font-size-base); }
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--color-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--color-accent);
}
/* Forms */
input, textarea, select {
font-family: inherit;
font-size: inherit;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
padding: var(--spacing-sm) var(--spacing-md);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
/* === 5. OBJECTS === */
.o-container {
@mixin container;
}
.o-container--narrow {
max-width: 800px;
}
.o-grid {
display: grid;
gap: var(--spacing-lg);
}
.o-grid--2cols {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.o-grid--sidebar {
grid-template-columns: 1fr 300px;
gap: var(--spacing-xl);
}
.o-flex {
display: flex;
}
.o-flex--center {
@mixin flex-center;
}
.o-flex--between {
@mixin flex-between;
}
.o-flex--wrap {
flex-wrap: wrap;
}
.o-section {
padding: var(--section-spacing) 0;
}
.o-section--alt {
background: var(--color-background-alt);
}
/* === 6. COMPONENTS === */
/* Header */
.c-header {
background: var(--color-background);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
}
.c-header__container {
@mixin container;
@mixin flex-between;
padding: var(--spacing-md) 0;
}
.c-header__logo {
@mixin text-style var(--font-size-xl), var(--font-weight-bold);
color: var(--color-primary);
}
.c-header__nav {
display: flex;
gap: var(--spacing-lg);
list-style: none;
}
/* Article */
.c-article {
max-width: 800px;
margin: 0 auto;
}
.c-article__header {
text-align: center;
margin-bottom: var(--spacing-xxl);
}
.c-article__meta {
color: var(--color-text-light);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-md);
}
.c-article__content {
@mixin text-style var(--font-size-lg);
}
.c-article__content h2 {
margin-top: var(--spacing-xxl);
margin-bottom: var(--spacing-lg);
}
.c-article__content p {
margin-bottom: var(--spacing-lg);
}
/* Card */
.c-card {
@mixin card-style;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.c-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.c-card__image {
width: 100%;
height: 200px;
object-fit: cover;
}
.c-card__content {
padding: var(--spacing-lg);
}
.c-card__title {
@mixin text-style var(--font-size-xl), var(--font-weight-semibold);
margin-bottom: var(--spacing-sm);
}
.c-card__excerpt {
color: var(--color-text-light);
margin-bottom: var(--spacing-md);
}
.c-card__meta {
@mixin flex-between;
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
/* Button */
.c-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius-md);
font-weight: var(--font-weight-semibold);
text-align: center;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.c-button--primary {
background: var(--color-secondary);
color: white;
}
.c-button--primary:hover {
background: #2980b9;
transform: translateY(-1px);
}
.c-button--outline {
background: transparent;
color: var(--color-secondary);
border: 2px solid var(--color-secondary);
}
.c-button--outline:hover {
background: var(--color-secondary);
color: white;
}
/* Sidebar */
.c-sidebar {
position: sticky;
top: 100px;
}
.c-sidebar__section {
@mixin card-style;
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.c-sidebar__title {
@mixin text-style var(--font-size-lg), var(--font-weight-semibold;
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--color-border);
}
/* Tag */
.c-tag {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--color-background-alt);
color: var(--color-text-light);
border-radius: var(--border-radius-sm);
font-size: var(--font-size-sm);
margin-right: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
}
.c-tag--primary {
background: var(--color-secondary);
color: white;
}
/* === 7. UTILITIES === */
/* Spacing */
.u-m-0 { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-sm { margin-top: var(--spacing-sm); }
.u-mt-md { margin-top: var(--spacing-md); }
.u-mt-lg { margin-top: var(--spacing-lg); }
.u-mt-xl { margin-top: var(--spacing-xl); }
.u-mb-sm { margin-bottom: var(--spacing-sm); }
.u-mb-md { margin-bottom: var(--spacing-md); }
.u-mb-lg { margin-bottom: var(--spacing-lg); }
.u-mb-xl { margin-bottom: var(--spacing-xl); }
/* Text */
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-light { color: var(--color-text-light); }
.u-text-primary { color: var(--color-primary); }
.u-text-secondary { color: var(--color-secondary); }
/* Display */
.u-hidden { display: none; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-flex { display: flex; }
/* Responsive */
@media (max-width: 768px) {
.u-hidden-mobile { display: none; }
.o-grid--sidebar { grid-template-columns: 1fr; }
.c-header__nav { gap: var(--spacing-md); }
}
/* Demo styles */
.architecture-demo {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: var(--spacing-xxl) 0;
margin: var(--spacing-xxl) 0;
}
.layer-progression {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
max-width: 800px;
margin: 0 auto;
}
.layer {
padding: var(--spacing-lg);
border-radius: var(--border-radius-lg);
border-left: 6px solid;
transition: transform 0.3s ease;
}
.layer:hover {
transform: translateX(10px);
}
.layer-1 { background: rgba(52, 152, 219, 0.9); border-color: #2980b9; }
.layer-2 { background: rgba(46, 204, 113, 0.9); border-color: #27ae60; }
.layer-3 { background: rgba(243, 156, 18, 0.9); border-color: #d35400; }
.layer-4 { background: rgba(155, 89, 182, 0.9); border-color: #8e44ad; }
.layer-5 { background: rgba(231, 76, 60, 0.9); border-color: #c0392b; }
.layer-6 { background: rgba(52, 73, 94, 0.9); border-color: #2c3e50; }
.layer-7 { background: rgba(149, 165, 166, 0.9); border-color: #7f8c8d; }
</style>
</head>
<body>
<!-- 🎯 HEADER COMPONENT -->
<header class="c-header">
<div class="c-header__container">
<div class="c-header__logo">📝 BlogCraft</div>
<nav>
<ul class="c-header__nav">
<li><a href="#home">Home</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#categories">Categories</a></li>
<li><a href="#about">About</a></li>
<li><button class="c-button c-button--outline">Subscribe</button></li>
</ul>
</nav>
</div>
</header>
<!-- 🚀 HERO SECTION -->
<section class="o-section o-section--alt">
<div class="o-container o-container--narrow">
<div class="u-text-center">
<h1>Mastering ITCSS Architecture</h1>
<p class="u-text-light u-mb-lg">A deep dive into scalable and maintainable CSS architecture</p>
<div class="o-flex o-flex--center" style="gap: var(--spacing-sm);">
<span class="c-tag c-tag--primary">CSS</span>
<span class="c-tag">Architecture</span>
<span class="c-tag">Frontend</span>
</div>
</div>
</div>
</section>
<!-- 📖 MAIN CONTENT -->
<main class="o-container o-section">
<div class="o-grid o-grid--sidebar">
<!-- ARTICLE CONTENT -->
<article class="c-article">
<header class="c-article__header">
<div class="c-article__meta">
Published on January 15, 2024 • 8 min read
</div>
<h1>Understanding ITCSS: The Inverted Triangle CSS</h1>
</header>
<div class="c-article__content">
<p>ITCSS (Inverted Triangle CSS) is a methodology that takes a unique approach to organizing your CSS architecture. Unlike traditional methods, ITCSS focuses on specificity and reach in a structured, layered approach.</p>
<h2>🏗️ The Seven Layers</h2>
<p>The ITCSS architecture is built upon seven distinct layers, each serving a specific purpose in the styling ecosystem:</p>
<div class="architecture-demo">
<div class="layer-progression">
<div class="layer layer-1">
<h3>1. Settings</h3>
<p>Global variables, configuration, and brand definitions</p>
<code>:root { --color-primary: #3498db; }</code>
</div>
<div class="layer layer-2">
<h3>2. Tools</h3>
<p>Mixins, functions, and reusable utilities</p>
<code>@define-mixin flex-center { display: flex; align-items: center; justify-content: center; }</code>
</div>
<div class="layer layer-3">
<h3>3. Generic</h3>
<p>Reset, normalize, and box-sizing rules</p>
<code>* { box-sizing: border-box; }</code>
</div>
<div class="layer layer-4">
<h3>4. Elements</h3>
<p>Styling for bare HTML elements</p>
<code>h1 { font-size: 2.5rem; } a { color: var(--color-primary); }</code>
</div>
<div class="layer layer-5">
<h3>5. Objects</h3>
<p>Layout and structural patterns</p>
<code>.o-container { max-width: 1200px; margin: 0 auto; }</code>
</div>
<div class="layer layer-6">
<h3>6. Components</h3>
<p>Specific UI components</p>
<code>.c-button { padding: var(--spacing-sm) var(--spacing-lg); }</code>
</div>
<div class="layer layer-7">
<h3>7. Utilities</h3>
<p>Helper classes and overrides</p>
<code>.u-text-center { text-align: center; }</code>
</div>
</div>
</div>
<h2>🎯 Benefits of ITCSS</h2>
<p>This architecture provides several key advantages for large-scale projects:</p>
<ul>
<li><strong>Scalability:</strong> Easy to maintain as projects grow</li>
<li><strong>Predictability:</strong> Clear naming conventions and structure</li>
<li><strong>Reusability:</strong> Components and patterns can be easily reused</li>
<li><strong>Team Collaboration:</strong> Consistent structure helps team workflow</li>
</ul>
</div>
</article>
<!-- SIDEBAR COMPONENT -->
<aside class="c-sidebar">
<div class="c-sidebar__section">
<h3 class="c-sidebar__title">📚 Related Articles</h3>
<div class="o-grid" style="gap: var(--spacing-md);">
<div class="c-card">
<div class="c-card__content">
<h4 class="c-card__title">BEM Methodology</h4>
<p class="c-card__excerpt">Block Element Modifier approach to CSS</p>
<div class="c-card__meta">
<span>5 min read</span>
</div>
</div>
</div>
<div class="c-card">
<div class="c-card__content">
<h4 class="c-card__title">CSS Architecture</h4>
<p class="c-card__excerpt">Building scalable stylesheets</p>
<div class="c-card__meta">
<span>7 min read</span>
</div>
</div>
</div>
</div>
</div>
<div class="c-sidebar__section">
<h3 class="c-sidebar__title">🏷️ Popular Tags</h3>
<div class="o-flex o-flex--wrap">
<span class="c-tag c-tag--primary">CSS</span>
<span class="c-tag">JavaScript</span>
<span class="c-tag">React</span>
<span class="c-tag">Vue</span>
<span class="c-tag">Architecture</span>
<span class="c-tag">Performance</span>
</div>
</div>
</aside>
</div>
</main>
<!-- 📦 RECENT ARTICLES -->
<section class="o-section o-section--alt">
<div class="o-container">
<h2 class="u-text-center u-mb-xl">📖 Recent Articles</h2>
<div class="o-grid o-grid--2cols">
<div class="c-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%233498db'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='18' fill='white' text-anchor='middle'%3ECSS Architecture%3C/text%3E%3C/svg%3E"
alt="CSS Architecture" class="c-card__image">
<div class="c-card__content">
<h3 class="c-card__title">Advanced CSS Architecture Patterns</h3>
<p class="c-card__excerpt">Explore modern approaches to scalable CSS architecture for enterprise applications.</p>
<div class="c-card__meta">
<span>10 min read</span>
<span>CSS • Architecture</span>
</div>
</div>
</div>
<div class="c-card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%232ecc71'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='18' fill='white' text-anchor='middle'%3EPerformance%3C/text%3E%3C/svg%3E"
alt="Web Performance" class="c-card__image">
<div class="c-card__content">
<h3 class="c-card__title">Optimizing CSS for Performance</h3>
<p class="c-card__excerpt">Learn techniques to reduce CSS bundle size and improve rendering performance.</p>
<div class="c-card__meta">
<span>8 min read</span>
<span>Performance • CSS</span>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>🏗️ ITCSS Architecture Guide
📋 Layer Definitions
1. Settings
Variables, config, preprocessor settings
2. Tools
Mixins, functions, globally available tools
3. Generic
Reset, normalize, box-sizing rules
4. Elements
Styling for bare HTML elements
5. Objects
Layout and structural patterns
6. Components
Specific UI components
7. Utilities
Helper classes, overrides
🎯 Implementation Strategy
- Define global settings and variables
- Create reusable tools and mixins
- Implement generic reset and base styles
- Style basic HTML elements
- Build layout objects and patterns
- Develop specific UI components
- Add utility classes for overrides
💡 Pro ITCSS Tips
File Organization:
- One file per layer (settings.scss, tools.scss, etc.)
- Multiple files per layer for large projects
- Use meaningful naming conventions
- Maintain import order strictly
Best Practices:
- Keep specificity low in early layers
- Use BEM naming within components
- Document your architecture decisions
- Regularly refactor and optimize
Ready to Architect Your CSS? 🏗️
Implement ITCSS in your projects to create scalable, maintainable, and predictable CSS architecture that grows gracefully with your application.