SMACSS 📁

Scalable and Modular Architecture for CSS - Organize your styles into five categories for maintainable code.

What is SMACSS?

SMACSS (Scalable and Modular Architecture for CSS) is a CSS methodology that categorizes CSS rules into five types: Base, Layout, Module, State, and Theme. This organization makes your CSS more predictable, maintainable, and scalable.

🎯

Base

Default element styles

📐

Layout

Major layout components

🧩

Module

Reusable components

🎮

State

Element states

🎨

Theme

Look and feel

SMACSS Core Principles

The Five Categories:

Base: Default styles for HTML elements (no classes)
Layout: Major layout components (prefixed with l-)
Module: Reusable, modular components
State: How modules look in states (prefixed with is-/has-)
Theme: Overall look and feel (prefixed with t-)

SMACSS Principles Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMACSS - Scalable and Modular Architecture for CSS</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .categories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .category-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .category-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid;
    }
    
    .base { border-color: #3498db; }
    .layout { border-color: #2ecc71; }
    .module { border-color: #e74c3c; }
    .state { border-color: #f39c12; }
    .theme { border-color: #9b59b6; }
    
    .category-icon {
      font-size: 2rem;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: white;
    }
    
    .base .category-icon { background: #3498db; }
    .layout .category-icon { background: #2ecc71; }
    .module .category-icon { background: #e74c3c; }
    .state .category-icon { background: #f39c12; }
    .theme .category-icon { background: #9b59b6; }
    
    .code-example {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1rem;
      border-radius: 5px;
      font-family: 'Fira Code', monospace;
      font-size: 0.8rem;
      line-height: 1.4;
      margin: 1rem 0;
      overflow-x: auto;
    }
    
    .comment { color: #7f8c8d; }
    .selector { color: #9b59b6; }
    .property { color: #3498db; }
    .value { color: #2ecc71; }
    
    .demo-area {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin: 2rem 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    /* SMACSS Demo Styles */
    
    /* Base Rules */
    html { font-size: 16px; }
    body { font-family: 'Inter', sans-serif; line-height: 1.6; }
    h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; color: #2c3e50; }
    p { margin-bottom: 1rem; color: #34495e; }
    a { color: #3498db; text-decoration: none; }
    a:hover { text-decoration: underline; }
    input, textarea, select {
      font-family: inherit;
      font-size: inherit;
      border: 1px solid #bdc3c7;
      padding: 0.5rem;
      border-radius: 4px;
    }
    
    /* Layout Rules */
    .l-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    .l-header {
      background: #2c3e50;
      color: white;
      padding: 1rem 0;
      margin-bottom: 2rem;
    }
    
    .l-sidebar {
      background: #ecf0f1;
      padding: 1.5rem;
      border-radius: 8px;
    }
    
    .l-main {
      padding: 1.5rem;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .l-footer {
      background: #34495e;
      color: white;
      padding: 2rem 0;
      margin-top: 3rem;
      text-align: center;
    }
    
    .l-grid {
      display: grid;
      gap: 2rem;
    }
    
    .l-grid-2 { grid-template-columns: 1fr 1fr; }
    .l-grid-sidebar { grid-template-columns: 250px 1fr; }
    .l-grid-3 { grid-template-columns: repeat(3, 1fr); }
    
    /* Module Rules */
    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: inherit;
    }
    
    .btn-primary {
      background: #3498db;
      color: white;
    }
    
    .btn-primary:hover {
      background: #2980b9;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }
    
    .btn-secondary {
      background: #95a5a6;
      color: white;
    }
    
    .btn-success {
      background: #27ae60;
      color: white;
    }
    
    .btn-outline {
      background: transparent;
      border: 2px solid #3498db;
      color: #3498db;
    }
    
    .card {
      background: white;
      border-radius: 10px;
      padding: 1.5rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      border: 1px solid #e1e8ed;
    }
    
    .card-header {
      border-bottom: 1px solid #ecf0f1;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
    }
    
    .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #2c3e50;
      margin: 0;
    }
    
    .card-body {
      color: #34495e;
    }
    
    .media {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }
    
    .media-image {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .media-body {
      flex: 1;
    }
    
    .media-title {
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #2c3e50;
    }
    
    .media-content {
      color: #7f8c8d;
      line-height: 1.5;
    }
    
    /* State Rules */
    .is-hidden { display: none !important; }
    .is-visible { display: block !important; }
    .is-active { background: #3498db !important; color: white !important; }
    .is-disabled { opacity: 0.6; cursor: not-allowed !important; }
    .is-loading { position: relative; color: transparent !important; }
    .is-loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2px solid #3498db;
      border-radius: 50%;
      border-right-color: transparent;
      animation: spin 0.8s linear infinite;
    }
    
    .has-error { border-color: #e74c3c !important; background: #fdf2f2; }
    .has-success { border-color: #27ae60 !important; background: #f2fdf2; }
    .has-warning { border-color: #f39c12 !important; background: #fef9f2; }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* Theme Rules */
    .t-dark {
      background: #1a1a1a;
      color: #ffffff;
    }
    
    .t-dark .card {
      background: #2d2d2d;
      border-color: #404040;
      color: #ffffff;
    }
    
    .t-dark .l-sidebar {
      background: #252525;
    }
    
    .t-dark .btn-outline {
      border-color: #ffffff;
      color: #ffffff;
    }
    
    .t-minimal .card {
      box-shadow: none;
      border: 1px solid #e1e8ed;
    }
    
    .t-minimal .btn {
      border-radius: 2px;
    }
    
    /* Utility Classes */
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-bold { font-weight: bold; }
    .text-muted { color: #7f8c8d; }
    .mb-1 { margin-bottom: 0.5rem; }
    .mb-2 { margin-bottom: 1rem; }
    .mb-3 { margin-bottom: 1.5rem; }
    .mt-2 { margin-top: 1rem; }
    .mt-3 { margin-top: 1.5rem; }
    
    @media (max-width: 768px) {
      .categories-grid {
        grid-template-columns: 1fr;
      }
      
      .l-grid-2,
      .l-grid-3,
      .l-grid-sidebar {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🏗️ SMACSS Methodology</h1>
      <p>Scalable and Modular Architecture for CSS - Organize your styles for large applications</p>
    </div>
    
    <!-- Base Rules -->
    <div class="categories-grid">
      <div class="category-card base">
        <div class="category-header">
          <div class="category-icon">🎯</div>
          <div>
            <h2>Base Rules</h2>
            <p class="text-muted">Default styles for HTML elements</p>
          </div>
        </div>
        
        <p>Base styles are the defaults. They can include styles for HTML elements, CSS resets, and typography rules.</p>
        
        <div class="code-example">
          <span class="comment">/* Base Rules - Element selectors only */</span><br>
          <span class="selector">html</span> { <span class="property">font-size</span>: <span class="value">16px</span>; }<br>
          <span class="selector">body</span> { <span class="property">font-family</span>: <span class="value">'Inter', sans-serif</span>; }<br>
          <span class="selector">a</span> { <span class="property">color</span>: <span class="value">#3498db</span>; }<br>
          <span class="selector">input</span>, <span class="selector">textarea</span> { <br>
          &nbsp;&nbsp;<span class="property">border</span>: <span class="value">1px solid #bdc3c7</span>;<br>
          &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">0.5rem</span>;<br>
          }
        </div>
        
        <div class="demo-area">
          <h4>Base Styles Demo</h4>
          <p>This paragraph uses base typography styles. <a href="#">This is a link</a> with base link styles.</p>
          <input type="text" placeholder="Input with base styles" style="width: 100%; max-width: 300px;">
          <textarea placeholder="Textarea with base styles" style="width: 100%; max-width: 300px; height: 80px;"></textarea>
        </div>
      </div>
      
      <!-- Layout Rules -->
      <div class="category-card layout">
        <div class="category-header">
          <div class="category-icon">📐</div>
          <div>
            <h2>Layout Rules</h2>
            <p class="text-muted">Major layout components and grids</p>
          </div>
        </div>
        
        <p>Layout styles divide the page into major sections. They're prefixed with <code>l-</code> to distinguish them.</p>
        
        <div class="code-example">
          <span class="comment">/* Layout Rules - Prefix with l- */</span><br>
          <span class="selector">.l-header</span> { <span class="property">background</span>: <span class="value">#2c3e50</span>; }<br>
          <span class="selector">.l-sidebar</span> { <span class="property">width</span>: <span class="value">250px</span>; }<br>
          <span class="selector">.l-grid</span> { <span class="property">display</span>: <span class="value">grid</span>; }<br>
          <span class="selector">.l-grid-sidebar</span> { <span class="property">grid-template-columns</span>: <span class="value">250px 1fr</span>; }
        </div>
      </div>
    </div>
    
    <!-- Module Rules -->
    <div class="category-card module">
      <div class="category-header">
        <div class="category-icon">🧩</div>
        <div>
          <h2>Module Rules</h2>
          <p class="text-muted">Reusable, modular components</p>
        </div>
      </div>
      
      <p>Modules are reusable, modular parts of the design. They are the majority of your styles and should be independent.</p>
      
      <div class="code-example">
        <span class="comment">/* Module Rules - Reusable components */</span><br>
        <span class="selector">.btn</span> { <span class="property">padding</span>: <span class="value">0.75rem 1.5rem</span>; }<br>
        <span class="selector">.card</span> { <span class="property">background</span>: <span class="value">white</span>; }<br>
        <span class="selector">.media</span> { <span class="property">display</span>: <span class="value">flex</span>; }<br>
        <span class="selector">.media-image</span> { <span class="property">width</span>: <span class="value">60px</span>; }
      </div>
      
      <div class="demo-area">
        <h4>Module Components Demo</h4>
        <div class="l-grid l-grid-3">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">User Card</h3>
            </div>
            <div class="card-body">
              <div class="media">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%233498db'/%3E%3C/svg%3E" alt="Avatar" class="media-image">
                <div class="media-body">
                  <h4 class="media-title">John Doe</h4>
                  <p class="media-content">Software Developer</p>
                </div>
              </div>
              <div class="mt-2">
                <button class="btn btn-primary">View Profile</button>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Stats Card</h3>
            </div>
            <div class="card-body">
              <div class="text-center">
                <div style="font-size: 2rem; font-weight: bold; color: #3498db;">127</div>
                <div class="text-muted">Projects Completed</div>
              </div>
              <div class="mt-2">
                <button class="btn btn-outline">View Details</button>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Actions</h3>
            </div>
            <div class="card-body">
              <div class="l-grid" style="gap: 0.5rem;">
                <button class="btn btn-primary">Primary Action</button>
                <button class="btn btn-secondary">Secondary</button>
                <button class="btn btn-success">Success</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- State Rules -->
    <div class="category-card state">
      <div class="category-header">
        <div class="category-icon">🎮</div>
        <div>
          <h2>State Rules</h2>
          <p class="text-muted">How modules look in different states</p>
        </div>
      </div>
      
      <p>State styles describe how modules look in particular states. They're prefixed with <code>is-</code> or <code>has-</code>.</p>
      
      <div class="code-example">
        <span class="comment">/* State Rules - Prefix with is- or has- */</span><br>
        <span class="selector">.is-hidden</span> { <span class="property">display</span>: <span class="value">none</span>; }<br>
        <span class="selector">.is-active</span> { <span class="property">background</span>: <span class="value">#3498db</span>; }<br>
        <span class="selector">.has-error</span> { <span class="property">border-color</span>: <span class="value">#e74c3c</span>; }<br>
        <span class="selector">.is-loading</span> { <span class="property">color</span>: <span class="value">transparent</span>; }
      </div>
      
      <div class="demo-area">
        <h4>State Variations Demo</h4>
        <div class="l-grid l-grid-2">
          <div>
            <h5>Button States</h5>
            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
              <button class="btn btn-primary">Normal</button>
              <button class="btn btn-primary is-active">Active</button>
              <button class="btn btn-primary is-disabled">Disabled</button>
              <button class="btn btn-primary is-loading">Loading</button>
            </div>
          </div>
          
          <div>
            <h5>Form States</h5>
            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
              <input type="text" placeholder="Normal input">
              <input type="text" placeholder="Error state" class="has-error">
              <input type="text" placeholder="Success state" class="has-success">
              <input type="text" placeholder="Warning state" class="has-warning">
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Theme Rules -->
    <div class="category-card theme">
      <div class="category-header">
        <div class="category-icon">🎨</div>
        <div>
          <h2>Theme Rules</h2>
          <p class="text-muted">Overall site look and feel</p>
        </div>
      </div>
      
      <p>Theme styles describe the overall look and feel of a site. They're prefixed with <code>t-</code> and can override other styles.</p>
      
      <div class="code-example">
        <span class="comment">/* Theme Rules - Prefix with t- */</span><br>
        <span class="selector">.t-dark</span> { <span class="property">background</span>: <span class="value">#1a1a1a</span>; }<br>
        <span class="selector">.t-dark .card</span> { <span class="property">background</span>: <span class="value">#2d2d2d</span>; }<br>
        <span class="selector">.t-minimal .card</span> { <span class="property">box-shadow</span>: <span class="value">none</span>; }
      </div>
      
      <div class="demo-area t-dark">
        <h4>Dark Theme Demo</h4>
        <div class="l-grid l-grid-2">
          <div class="card">
            <h5 class="card-title">Dark Theme Card</h5>
            <p class="card-body">This card uses the dark theme styles.</p>
            <button class="btn btn-outline">Theme Button</button>
          </div>
          
          <div class="card">
            <h5 class="card-title">Another Dark Card</h5>
            <p class="card-body">All styles are automatically adjusted for the dark theme.</p>
            <button class="btn btn-primary">Primary Action</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <h3>💡 Why Use SMACSS?</h3>
      <div class="l-grid l-grid-2">
        <div>
          <h4>🎯 Benefits</h4>
          <ul>
            <li><strong>Scalable:</strong> Works for projects of any size</li>
            <li><strong>Organized:</strong> Clear separation of concerns</li>
            <li><strong>Maintainable:</strong> Easy to find and update styles</li>
            <li><strong>Predictable:</strong> Consistent naming conventions</li>
            <li><strong>Team-Friendly:</strong> Easy for multiple developers</li>
          </ul>
        </div>
        <div>
          <h4>🚀 Real-World Impact</h4>
          <ul>
            <li>Faster development cycles</li>
            <li>Easier onboarding for new team members</li>
            <li>Better collaboration between designers and developers</li>
            <li>Reduced CSS conflicts and specificity issues</li>
            <li>Easier theme switching and customization</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

SMACSS File Structure

Organized File Structure

SMACSS encourages organizing CSS files by category for better maintainability.

styles/

├── base/

├── layout/

├── modules/

├── state/

└── themes/

Dashboard Example

Real-world dashboard built with SMACSS architecture and modern components.

.l-header, .l-sidebar

.card, .btn, .media

.is-active, .has-error

.t-dark, .t-minimal

File Structure & Dashboard Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMACSS File Structure - Organized CSS Architecture</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .structure-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .structure-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .file-tree {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1.5rem;
      border-radius: 8px;
      margin: 1rem 0;
      font-family: 'Fira Code', monospace;
      font-size: 0.9rem;
    }
    
    .folder { color: #3498db; margin-left: 1rem; }
    .file { color: #2ecc71; margin-left: 2rem; }
    .comment { color: #7f8c8d; margin-left: 2rem; }
    
    .demo-section {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    /* Modern Dashboard Components */
    .dashboard {
      display: grid;
      gap: 1.5rem;
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
      grid-template-columns: 250px 1fr;
      grid-template-rows: auto 1fr auto;
      min-height: 600px;
    }
    
    .dashboard-header {
      grid-area: header;
      background: #2c3e50;
      color: white;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px;
    }
    
    .dashboard-sidebar {
      grid-area: sidebar;
      background: #34495e;
      color: white;
      padding: 1.5rem;
      border-radius: 8px;
    }
    
    .dashboard-main {
      grid-area: main;
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      align-content: start;
    }
    
    .dashboard-footer {
      grid-area: footer;
      background: #ecf0f1;
      padding: 1rem;
      text-align: center;
      border-radius: 8px;
    }
    
    .stat-card {
      background: white;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      border-left: 4px solid #3498db;
    }
    
    .stat-card--success { border-left-color: #27ae60; }
    .stat-card--warning { border-left-color: #f39c12; }
    .stat-card--error { border-left-color: #e74c3c; }
    
    .stat-number {
      font-size: 2rem;
      font-weight: bold;
      color: #2c3e50;
      display: block;
    }
    
    .stat-label {
      color: #7f8c8d;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .nav-list {
      list-style: none;
    }
    
    .nav-item {
      padding: 0.75rem 1rem;
      margin-bottom: 0.5rem;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    
    .nav-item:hover {
      background: rgba(255,255,255,0.1);
    }
    
    .nav-item.is-active {
      background: #3498db;
    }
    
    .progress-bar {
      height: 8px;
      background: #ecf0f1;
      border-radius: 4px;
      overflow: hidden;
      margin: 0.5rem 0;
    }
    
    .progress-fill {
      height: 100%;
      background: #3498db;
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    
    .progress-fill--success { background: #27ae60; }
    .progress-fill--warning { background: #f39c12; }
    
    .notification {
      padding: 1rem;
      border-radius: 6px;
      margin-bottom: 1rem;
      border-left: 4px solid;
    }
    
    .notification--info {
      background: #d1ecf1;
      border-color: #17a2b8;
      color: #0c5460;
    }
    
    .notification--success {
      background: #d4edda;
      border-color: #28a745;
      color: #155724;
    }
    
    .notification--warning {
      background: #fff3cd;
      border-color: #ffc107;
      color: #856404;
    }
    
    .user-profile {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .user-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .user-info h4 {
      margin: 0;
      color: #2c3e50;
    }
    
    .user-info p {
      margin: 0;
      color: #7f8c8d;
      font-size: 0.9rem;
    }
    
    @media (max-width: 768px) {
      .structure-grid {
        grid-template-columns: 1fr;
      }
      
      .dashboard {
        grid-template-areas:
          "header"
          "main"
          "sidebar"
          "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>📁 SMACSS File Structure</h1>
      <p>Organize your CSS files for scalability and maintainability</p>
    </div>
    
    <!-- File Structure -->
    <div class="structure-grid">
      <div class="structure-card">
        <h3>📂 Recommended File Structure</h3>
        <p>Organize your CSS files according to SMACSS categories for better maintainability.</p>
        
        <div class="file-tree">
          <div class="folder">styles/</div>
          <div class="file">main.scss</div>
          <div class="comment">// Main import file</div>
          
          <div class="folder">base/</div>
          <div class="file">_reset.scss</div>
          <div class="file">_typography.scss</div>
          <div class="file">_elements.scss</div>
          <div class="comment">// Base rules</div>
          
          <div class="folder">layout/</div>
          <div class="file">_header.scss</div>
          <div class="file">_footer.scss</div>
          <div class="file">_sidebar.scss</div>
          <div class="file">_grid.scss</div>
          <div class="comment">// Layout rules</div>
          
          <div class="folder">modules/</div>
          <div class="file">_buttons.scss</div>
          <div class="file">_cards.scss</div>
          <div class="file">_forms.scss</div>
          <div class="file">_navigation.scss</div>
          <div class="comment">// Module rules</div>
          
          <div class="folder">state/</div>
          <div class="file">_states.scss</div>
          <div class="file">_responsive.scss</div>
          <div class="comment">// State rules</div>
          
          <div class="folder">themes/</div>
          <div class="file">_dark.scss</div>
          <div class="file">_light.scss</div>
          <div class="file">_minimal.scss</div>
          <div class="comment">// Theme rules</div>
          
          <div class="folder">utils/</div>
          <div class="file">_variables.scss</div>
          <div class="file">_mixins.scss</div>
          <div class="file">_helpers.scss</div>
          <div class="comment">// Utilities and helpers</div>
        </div>
      </div>
      
      <div class="structure-card">
        <h3>🔧 Main Import File</h3>
        <p>The main SCSS file that imports all other files in the correct order.</p>
        
        <div class="file-tree">
          <div class="comment">// styles/main.scss</div>
          <div class="file">@import 'utils/variables';</div>
          <div class="file">@import 'utils/mixins';</div>
          <br>
          <div class="file">@import 'base/reset';</div>
          <div class="file">@import 'base/typography';</div>
          <div class="file">@import 'base/elements';</div>
          <br>
          <div class="file">@import 'layout/grid';</div>
          <div class="file">@import 'layout/header';</div>
          <div class="file">@import 'layout/footer';</div>
          <br>
          <div class="file">@import 'modules/buttons';</div>
          <div class="file">@import 'modules/cards';</div>
          <div class="file">@import 'modules/forms';</div>
          <br>
          <div class="file">@import 'state/states';</div>
          <div class="file">@import 'state/responsive';</div>
          <br>
          <div class="file">@import 'themes/dark';</div>
          <div class="file">@import 'themes/light';</div>
          <br>
          <div class="file">@import 'utils/helpers';</div>
        </div>
      </div>
    </div>
    
    <!-- Dashboard Demo -->
    <div class="structure-card">
      <h3>🎯 Real-World Dashboard Example</h3>
      <p>A complete dashboard built with SMACSS architecture.</p>
      
      <div class="demo-section">
        <div class="dashboard">
          <header class="dashboard-header">
            <h2 style="margin: 0;">Analytics Dashboard</h2>
            <div style="display: flex; gap: 1rem; align-items: center;">
              <span>Welcome, John Doe</span>
              <div class="user-profile" style="padding: 0.5rem; background: rgba(255,255,255,0.1);">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%233498db'/%3E%3C/svg%3E" alt="Avatar" class="user-avatar">
              </div>
            </div>
          </header>
          
          <aside class="dashboard-sidebar">
            <nav>
              <ul class="nav-list">
                <li class="nav-item is-active">Dashboard</li>
                <li class="nav-item">Analytics</li>
                <li class="nav-item">Users</li>
                <li class="nav-item">Settings</li>
                <li class="nav-item">Reports</li>
              </ul>
            </nav>
          </aside>
          
          <main class="dashboard-main">
            <div class="stat-card">
              <span class="stat-number">2,847</span>
              <span class="stat-label">Total Users</span>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 75%"></div>
              </div>
            </div>
            
            <div class="stat-card stat-card--success">
              <span class="stat-number">$12,847</span>
              <span class="stat-label">Revenue</span>
              <div class="progress-bar">
                <div class="progress-fill progress-fill--success" style="width: 60%"></div>
              </div>
            </div>
            
            <div class="stat-card stat-card--warning">
              <span class="stat-number">1,234</span>
              <span class="stat-label">Active Sessions</span>
              <div class="progress-bar">
                <div class="progress-fill progress-fill--warning" style="width: 85%"></div>
              </div>
            </div>
            
            <div class="stat-card stat-card--error">
              <span class="stat-number">47</span>
              <span class="stat-label">Issues</span>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 25%"></div>
              </div>
            </div>
            
            <div style="grid-column: 1 / -1;">
              <div class="notification notification--info">
                <strong>Info:</strong> System update scheduled for tonight at 2:00 AM.
              </div>
              
              <div class="notification notification--success">
                <strong>Success:</strong> All systems are running smoothly.
              </div>
              
              <div class="notification notification--warning">
                <strong>Warning:</strong> High memory usage detected on server 3.
              </div>
            </div>
          </main>
          
          <footer class="dashboard-footer">
            <p style="margin: 0; color: #7f8c8d;">© 2024 Analytics Dashboard. All rights reserved.</p>
          </footer>
        </div>
      </div>
    </div>
    
    <!-- Naming Conventions -->
    <div class="structure-card">
      <h3>📝 SMACSS Naming Conventions</h3>
      <p>Consistent naming helps maintain organization and clarity.</p>
      
      <div class="demo-section">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
          <div>
            <h4>✅ Good SMACSS Names</h4>
            <div class="file-tree">
              <div class="comment">// Layout</div>
              <div class="file">.l-header</div>
              <div class="file">.l-sidebar</div>
              <div class="file">.l-grid</div>
              <br>
              <div class="comment">// Modules</div>
              <div class="file">.btn</div>
              <div class="file">.card</div>
              <div class="file">.media</div>
              <br>
              <div class="comment">// States</div>
              <div class="file">.is-active</div>
              <div class="file">.has-error</div>
              <div class="file">.is-hidden</div>
            </div>
          </div>
          
          <div>
            <h4>❌ Poor Names</h4>
            <div class="file-tree">
              <div class="comment">// Unclear purpose</div>
              <div class="file">.blue-header</div>
              <div class="file">.left-column</div>
              <div class="file">.big-button</div>
              <br>
              <div class="comment">// No categorization</div>
              <div class="file">.header-style</div>
              <div class="file">.sidebar-look</div>
              <div class="file">.active-state</div>
              <br>
              <div class="comment">// Inconsistent</div>
              <div class="file">.hidden</div>
              <div class="file">.isVisible</div>
              <div class="file">.has_error</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

SMACSS Best Practices

Consistent Naming Conventions

Use prefixes to clearly identify the category of each class. This makes your CSS more predictable and easier to maintain.

// Layout: .l-header, .l-sidebar, .l-grid

// State: .is-active, .has-error, .is-hidden

// Theme: .t-dark, .t-minimal, .t-corporate

Best Practices Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMACSS Best Practices - Scalable CSS Architecture</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #2c3e50;
    }
    
    .practices-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .practice-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .do-dont {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .do {
      background: #d4edda;
      border: 2px solid #c3e6cb;
      padding: 1rem;
      border-radius: 5px;
    }
    
    .dont {
      background: #f8d7da;
      border: 2px solid #f5c6cb;
      padding: 1rem;
      border-radius: 5px;
    }
    
    .good-example, .bad-example {
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 5px;
      font-family: 'Fira Code', monospace;
      font-size: 0.8rem;
    }
    
    .good-example {
      background: #d1ecf1;
      border-left: 4px solid #17a2b8;
    }
    
    .bad-example {
      background: #f8d7da;
      border-left: 4px solid #dc3545;
    }
    
    .workflow-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .step {
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .step-number {
      background: #3498db;
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-weight: bold;
    }
    
    .team-guidelines {
      background: #d4edda;
      border-left: 4px solid #28a745;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .common-pitfalls {
      background: #f8d7da;
      border-left: 4px solid #dc3545;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .performance-tips {
      background: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 1.5rem;
      margin: 1rem 0;
      border-radius: 5px;
    }
    
    @media (max-width: 768px) {
      .practices-grid {
        grid-template-columns: 1fr;
      }
      
      .do-dont {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>✅ SMACSS Best Practices</h1>
      <p>Build scalable, maintainable CSS architecture with proven practices</p>
    </div>
    
    <div class="practices-grid">
      <div class="practice-card">
        <h3>📏 Consistent Naming</h3>
        <p>Use prefixes to clearly identify the purpose of each class.</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ SMACSS Prefixes</strong>
            <div class="good-example">
              .l-header<br>
              .btn-primary<br>
              .is-active<br>
              .t-dark
            </div>
          </div>
          <div class="dont">
            <strong>❌ Unclear Names</strong>
            <div class="bad-example">
              .header<br>
              .primary-button<br>
              .active<br>
              .dark-theme
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🎯 Category Separation</h3>
        <p>Keep styles in their proper categories and avoid mixing concerns.</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Clear Separation</strong>
            <div class="good-example">
              <span class="comment">// Layout</span><br>
              .l-grid { display: grid; }<br><br>
              <span class="comment">// Module</span><br>
              .card { background: white; }<br><br>
              <span class="comment">// State</span><br>
              .is-hidden { display: none; }
            </div>
          </div>
          <div class="dont">
            <strong>❌ Mixed Concerns</strong>
            <div class="bad-example">
              .grid-card {<br>
              &nbsp;&nbsp;display: grid;<br>
              &nbsp;&nbsp;background: white;<br>
              &nbsp;&nbsp;display: none;<br>
              }
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🏗️ File Organization</h3>
        <p>Organize files logically and import them in the correct order.</p>
        
        <div class="performance-tips">
          <strong>💡 Import Order Matters:</strong><br>
          Always import files in this order: Utilities → Base → Layout → Modules → State → Themes
        </div>
        
        <div class="good-example">
          <span class="comment">// Correct import order</span><br>
          @import 'utils/variables';<br>
          @import 'base/reset';<br>
          @import 'layout/grid';<br>
          @import 'modules/buttons';<br>
          @import 'state/states';<br>
          @import 'themes/dark';
        </div>
      </div>
      
      <div class="practice-card">
        <h3>⚡ Performance Considerations</h3>
        <p>Optimize for performance while maintaining organization.</p>
        
        <div class="performance-tips">
          <strong>💡 Performance Tips:</strong>
          <ul>
            <li>Keep specificity low and consistent</li>
            <li>Use utility classes for common patterns</li>
            <li>Avoid deeply nested selectors in preprocessors</li>
            <li>Consider critical CSS for above-the-fold content</li>
            <li>Use CSS custom properties for theming</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="practice-card">
      <h3>🚀 SMACSS Workflow</h3>
      
      <div class="workflow-steps">
        <div class="step">
          <div class="step-number">1</div>
          <h4>Analyze Design</h4>
          <p>Identify patterns and categorize components</p>
        </div>
        
        <div class="step">
          <div class="step-number">2</div>
          <h4>Setup Structure</h4>
          <p>Create file structure and import order</p>
        </div>
        
        <div class="step">
          <div class="step-number">3</div>
          <h4>Write Base Styles</h4>
          <p>Define reset, typography, and element styles</p>
        </div>
        
        <div class="step">
          <div class="step-number">4</div>
          <h4>Build Layouts</h4>
          <p>Create major layout components</p>
        </div>
        
        <div class="step">
          <div class="step-number">5</div>
          <h4>Develop Modules</h4>
          <p>Build reusable component modules</p>
        </div>
        
        <div class="step">
          <div class="step-number">6</div>
          <h4>Add States & Themes</h4>
          <p>Implement states and theme variations</p>
        </div>
      </div>
    </div>
    
    <div class="team-guidelines">
      <h3>👥 Team Guidelines</h3>
      <p><strong>For successful SMACSS implementation in teams:</strong></p>
      <ul>
        <li>Create a shared naming convention document</li>
        <li>Establish file organization standards</li>
        <li>Use linters to enforce SMACSS principles</li>
        <li>Document component usage and patterns</li>
        <li>Regularly review and refactor CSS</li>
        <li>Maintain a living style guide</li>
      </ul>
    </div>
    
    <div class="common-pitfalls">
      <h3>⚠️ Common Pitfalls</h3>
      <p><strong>Avoid these common SMACSS mistakes:</strong></p>
      <ul>
        <li><strong>Over-categorization:</strong> Creating too many categories</li>
        <li><strong>Naming inconsistency:</strong> Mixing naming conventions</li>
        <li><strong>Specificity wars:</strong> Not managing CSS specificity properly</li>
        <li><strong>File bloat:</strong> Too many small, unnecessary files</li>
        <li><strong>Import order issues:</strong> Wrong import order causing conflicts</li>
        <li><strong>Theme confusion:</strong> Not clearly separating theme styles</li>
      </ul>
    </div>
    
    <div class="practice-card">
      <h3>🔧 Tooling & Automation</h3>
      
      <div class="do-dont">
        <div class="do">
          <strong>✅ Recommended Tools</strong>
          <ul>
            <li><strong>Stylelint:</strong> Enforce SMACSS naming conventions</li>
            <li><strong>Sass/PostCSS:</strong> For organization and processing</li>
            <li><strong>Storybook:</strong> For component documentation</li>
            <li><strong>CSS Stats:</strong> For performance analysis</li>
            <li><strong>Prettier:</strong> For consistent code formatting</li>
          </ul>
        </div>
        <div class="dont">
          <strong>❌ Things to Avoid</strong>
          <ul>
            <li>Manual file organization</li>
            <li>Inconsistent tooling across team</li>
            <li>No documentation for patterns</li>
            <li>Ignoring performance metrics</li>
            <li>Mixing methodologies arbitrarily</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

SMACSS vs Other CSS Methodologies

📁 SMACSS

Five categories, organized structure

🏗️ BEM

Strict naming, component-focused

🎯 OOCSS

Structure/Skin separation

Methodology Comparison

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMACSS vs Other CSS Methodologies - Comparison Guide</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      padding: 2rem;
      color: #2c3e50;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #2c3e50;
    }
    
    .methodology-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .methodology-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      text-align: center;
    }
    
    .methodology-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    .comparison-section {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      margin: 2rem 0;
    }
    
    .comparison-table th,
    .comparison-table td {
      padding: 1rem;
      text-align: left;
      border-bottom: 1px solid #ecf0f1;
    }
    
    .comparison-table th {
      background: #3498db;
      color: white;
      font-weight: bold;
    }
    
    .comparison-table tr:hover {
      background: #f8f9fa;
    }
    
    .pros-cons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .pros {
      background: #d4edda;
      padding: 1.5rem;
      border-radius: 10px;
    }
    
    .cons {
      background: #f8d7da;
      padding: 1.5rem;
      border-radius: 10px;
    }
    
    .use-case-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .use-case {
      background: #e8f4fd;
      padding: 1.5rem;
      border-radius: 10px;
      border-left: 4px solid #3498db;
    }
    
    .decision-guide {
      background: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    .code-examples {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .code-example {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1.5rem;
      border-radius: 10px;
      font-family: 'Fira Code', monospace;
      font-size: 0.9rem;
    }
    
    @media (max-width: 768px) {
      .methodology-grid {
        grid-template-columns: 1fr;
      }
      
      .pros-cons {
        grid-template-columns: 1fr;
      }
      
      .code-examples {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>⚖️ SMACSS vs Other Methodologies</h1>
      <p>Compare SMACSS with BEM, OOCSS, and Utility-First CSS</p>
    </div>
    
    <div class="methodology-grid">
      <div class="methodology-card">
        <div class="methodology-icon">📁</div>
        <h3>SMACSS</h3>
        <p><strong>Scalable Modular Architecture</strong></p>
        <p>Categorizes CSS into Base, Layout, Module, State, Theme</p>
        <div class="good-example" style="margin-top: 1rem;">
          .l-header, .btn, .is-active
        </div>
      </div>
      
      <div class="methodology-card">
        <div class="methodology-icon">🏗️</div>
        <h3>BEM</h3>
        <p><strong>Block Element Modifier</strong></p>
        <p>Strict naming convention with block__element--modifier</p>
        <div class="good-example" style="margin-top: 1rem;">
          .block__element--modifier
        </div>
      </div>
      
      <div class="methodology-card">
        <div class="methodology-icon">🎯</div>
        <h3>OOCSS</h3>
        <p><strong>Object Oriented CSS</strong></p>
        <p>Separates structure from skin and container from content</p>
        <div class="good-example" style="margin-top: 1rem;">
          .media, .btn, .card
        </div>
      </div>
      
      <div class="methodology-card">
        <div class="methodology-icon">⚡</div>
        <h3>Utility-First</h3>
        <p><strong>Functional CSS</strong></p>
        <p>Small, single-purpose classes (Tailwind CSS)</p>
        <div class="good-example" style="margin-top: 1rem;">
          .mt-4, .text-center
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>📊 Methodology Comparison</h2>
      
      <table class="comparison-table">
        <thead>
          <tr>
            <th>Feature</th>
            <th>SMACSS</th>
            <th>BEM</th>
            <th>OOCSS</th>
            <th>Utility-First</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>Learning Curve</strong></td>
            <td>Moderate</td>
            <td>Moderate</td>
            <td>Moderate</td>
            <td>Easy</td>
          </tr>
          <tr>
            <td><strong>Organization</strong></td>
            <td>Excellent</td>
            <td>Good</td>
            <td>Good</td>
            <td>Moderate</td>
          </tr>
          <tr>
            <td><strong>Scalability</strong></td>
            <td>Excellent</td>
            <td>Excellent</td>
            <td>Excellent</td>
            <td>Good</td>
          </tr>
          <tr>
            <td><strong>HTML Size</strong></td>
            <td>Moderate</td>
            <td>Moderate</td>
            <td>Moderate</td>
            <td>Large</td>
          </tr>
          <tr>
            <td><strong>CSS Size</strong></td>
            <td>Moderate</td>
            <td>Moderate</td>
            <td>Small</td>
            <td>Large</td>
          </tr>
          <tr>
            <td><strong>Team Adoption</strong></td>
            <td>Moderate</td>
            <td>Easy with guidelines</td>
            <td>Easy</td>
            <td>Easy</td>
          </tr>
          <tr>
            <td><strong>Flexibility</strong></td>
            <td>High</td>
            <td>Moderate</td>
            <td>High</td>
            <td>Very High</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="comparison-section">
      <h2>🎯 SMACSS: Pros and Cons</h2>
      
      <div class="pros-cons">
        <div class="pros">
          <h3>✅ Advantages</h3>
          <ul>
            <li><strong>Excellent Organization:</strong> Clear categorization system</li>
            <li><strong>Scalable:</strong> Works for projects of any size</li>
            <li><strong>Maintainable:</strong> Easy to find and update styles</li>
            <li><strong>Predictable:</strong> Consistent naming conventions</li>
            <li><strong>Comprehensive:</strong> Covers all aspects of CSS architecture</li>
            <li><strong>Theme-Friendly:</strong> Built-in support for theming</li>
          </ul>
        </div>
        
        <div class="cons">
          <h3>❌ Disadvantages</h3>
          <ul>
            <li><strong>Learning Curve:</strong> Requires understanding of categories</li>
            <li><strong>Overhead:</strong> Can feel heavy for small projects</li>
            <li><strong>File Organization:</strong> Requires disciplined file structure</li>
            <li><strong>Team Training:</strong> Team needs to learn methodology</li>
            <li><strong>Rigid Structure:</strong> Less flexible than some approaches</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🔍 Code Comparison</h2>
      
      <div class="code-examples">
        <div class="code-example">
          <strong>SMACSS Approach</strong><br><br>
          <span class="comment">// Layout</span><br>
          &lt;div class="l-header"&gt;...&lt;/div&gt;<br>
          &lt;div class="l-sidebar"&gt;...&lt;/div&gt;<br><br>
          <span class="comment">// Module</span><br>
          &lt;button class="btn btn-primary"&gt;Click&lt;/button&gt;<br>
          &lt;div class="card"&gt;...&lt;/div&gt;<br><br>
          <span class="comment">// State</span><br>
          &lt;div class="is-hidden"&gt;...&lt;/div&gt;<br>
          &lt;input class="has-error"&gt;
        </div>
        
        <div class="code-example">
          <strong>BEM Approach</strong><br><br>
          &lt;div class="header"&gt;...&lt;/div&gt;<br>
          &lt;div class="sidebar"&gt;...&lt;/div&gt;<br><br>
          &lt;button class="btn btn--primary"&gt;Click&lt;/button&gt;<br>
          &lt;div class="card"&gt;<br>
          &nbsp;&nbsp;&lt;div class="card__header"&gt;...&lt;/div&gt;<br>
          &nbsp;&nbsp;&lt;div class="card__body"&gt;...&lt;/div&gt;<br>
          &lt;/div&gt;<br><br>
          &lt;div class="header__nav--hidden"&gt;...&lt;/div&gt;
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🎯 When to Use Each Methodology</h2>
      
      <div class="use-case-grid">
        <div class="use-case">
          <h4>✅ Use SMACSS For:</h4>
          <ul>
            <li>Large, complex applications</li>
            <li>Projects requiring clear organization</li>
            <li>Teams needing structured guidelines</li>
            <li>Applications with multiple themes</li>
            <li>When maintainability is crucial</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use BEM For:</h4>
          <ul>
            <li>Component-based architectures</li>
            <li>Teams preferring strict naming</li>
            <li>Projects with many reusable components</li>
            <li>When clarity is prioritized</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use OOCSS For:</h4>
          <ul>
            <li>Performance-critical applications</li>
            <li>Highly reusable component libraries</li>
            <li>When CSS file size matters</li>
            <li>Teams familiar with OOP concepts</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use Utility-First For:</h4>
          <ul>
            <li>Rapid prototyping</li>
            <li>Small to medium projects</li>
            <li>When design consistency is crucial</li>
            <li>Teams using Tailwind CSS</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="decision-guide">
      <h3>🎯 Decision Guide</h3>
      <p><strong>Choose SMACSS when:</strong> You're building large, complex applications that need 
      clear organization and scalability. It's perfect for enterprise projects where maintainability 
      and team collaboration are critical.</p>
      
      <p><strong>Consider alternatives when:</strong> You're working on smaller projects, need rapid 
      development, or prefer more flexible approaches.</p>
      
      <p><strong>Hybrid Approach:</strong> Many teams successfully combine SMACSS categories with 
      concepts from other methodologies, using SMACSS for organization and BEM for module naming.</p>
    </div>
    
    <div class="comparison-section">
      <h2>🚀 Modern Trends & SMACSS</h2>
      <p><strong>How SMACSS fits into modern web development:</strong></p>
      
      <div class="pros-cons">
        <div class="pros">
          <h4>SMACSS in 2024</h4>
          <ul>
            <li><strong>CSS-in-JS:</strong> SMACSS principles apply to styled-components organization</li>
            <li><strong>Design Systems:</strong> Perfect foundation for component libraries</li>
            <li><strong>Micro Frontends:</strong> Scales well with distributed teams</li>
            <li><strong>Utility-First:</strong> Can be combined with utility classes</li>
            <li><strong>Web Components:</strong> Natural fit for encapsulated styles</li>
          </ul>
        </div>
        
        <div class="cons">
          <h4>Considerations</h4>
          <ul>
            <li>Team experience with categorization concepts</li>
            <li>Project scale and complexity requirements</li>
            <li>Integration with modern frameworks and tools</li>
            <li>Tooling and build process setup</li>
            <li>Long-term maintenance strategy</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Practical Applications

🏗️ Enterprise Applications

Dashboard and analytics platforms
Admin panels and CMS systems
E-commerce platforms
CRM and ERP systems
Large-scale web applications

🔧 Real-World Patterns

Analyze design and categorize components
Setup file structure and import order
Implement base styles and layout
Build reusable module components
Add state variations and themes

💡 Pro Tips for Effective SMACSS

Development:

Start with a solid base foundation
Use layout classes for major sections
Keep modules independent and reusable
Document state and theme usage

Maintenance:

Regularly audit and refactor categories
Use linters to enforce conventions
Maintain a living style guide
Train team members on methodology

Ready to Master SMACSS? 📁

Start using SMACSS to create scalable, maintainable CSS architecture for your projects. Organize your styles into clear categories and build complex applications with confidence.

< Previous Next >