OOCSS 🎯

Object Oriented CSS - Create reusable, scalable components with separation of structure and skin.

What is Object Oriented CSS?

OOCSS is a CSS methodology that focuses on creating reusable, modular components by separating structure from skin and container from content. It's like building with LEGO blocks - small, reusable pieces that can be combined in countless ways.

🏗️ Structure vs Skin

Separate layout (structure) from visual styles (skin)

📦 Container vs Content

Styles shouldn't depend on where elements are placed

OOCSS Core Principles

Key Concepts:

Structure Classes: Layout, positioning, spacing
Skin Classes: Colors, typography, visual styles
Content Independence: Components work anywhere
Reusability: Write once, use everywhere
Composition: Build complex UIs from simple pieces

OOCSS Principles Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OOCSS - Object Oriented CSS Principles</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);
    }
    
    .principles-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .principle-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .code-comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .good-code, .bad-code {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1rem;
      border-radius: 5px;
      font-family: 'Fira Code', monospace;
      font-size: 0.8rem;
      line-height: 1.4;
      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);
    }
    
    /* OOCSS Demo Styles - Modern Examples */
    
    /* Structure Classes - The "Container" */
    .flex { display: flex; }
    .grid { display: grid; }
    .wrap { flex-wrap: wrap; }
    .center { justify-content: center; align-items: center; }
    .between { justify-content: space-between; }
    .gap-1 { gap: 1rem; }
    .gap-2 { gap: 2rem; }
    .col-2 { grid-template-columns: 1fr 1fr; }
    .col-3 { grid-template-columns: 1fr 1fr 1fr; }
    
    /* Skin Classes - The "Content" */
    .card-skin {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      border: 1px solid #e1e8ed;
    }
    
    .dark-card {
      background: #2c3e50;
      color: white;
      border: 1px solid #34495e;
    }
    
    .gradient-bg {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
    }
    
    .social-card {
      background: linear-gradient(45deg, #ff6b6b, #ee5a24);
      color: white;
      border: none;
    }
    
    .neumorphic {
      background: #f0f0f0;
      border-radius: 20px;
      box-shadow: 8px 8px 16px #d9d9d9, -8px -8px 16px #ffffff;
    }
    
    /* Component Styles */
    .profile {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #3498db;
    }
    
    .profile-lg {
      width: 100px;
      height: 100px;
    }
    
    .profile-sm {
      width: 40px;
      height: 40px;
    }
    
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
    }
    
    .badge-primary {
      background: #3498db;
      color: white;
    }
    
    .badge-success {
      background: #2ecc71;
      color: white;
    }
    
    .badge-warning {
      background: #f39c12;
      color: white;
    }
    
    .badge-ghost {
      background: transparent;
      border: 1px solid #bdc3c7;
      color: #7f8c8d;
    }
    
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 8px;
      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-ghost {
      background: transparent;
      border: 2px solid #3498db;
      color: #3498db;
    }
    
    .btn-ghost:hover {
      background: #3498db;
      color: white;
    }
    
    .btn-social {
      background: #1da1f2;
      color: white;
    }
    
    .btn-social:hover {
      background: #0d8bd9;
    }
    
    .icon {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }
    
    .stats {
      text-align: center;
      padding: 1rem;
    }
    
    .stat-number {
      font-size: 2rem;
      font-weight: bold;
      color: #2c3e50;
      display: block;
    }
    
    .stat-label {
      font-size: 0.9rem;
      color: #7f8c8d;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .dark-theme .stat-number { color: white; }
    .dark-theme .stat-label { color: #bdc3c7; }
    
    .notification {
      padding: 1rem;
      border-radius: 8px;
      margin: 0.5rem 0;
      border-left: 4px solid;
    }
    
    .notification-success {
      background: #d4edda;
      border-color: #28a745;
      color: #155724;
    }
    
    .notification-error {
      background: #f8d7da;
      border-color: #dc3545;
      color: #721c24;
    }
    
    .notification-warning {
      background: #fff3cd;
      border-color: #ffc107;
      color: #856404;
    }
    
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted #3498db;
      cursor: help;
    }
    
    .tooltip:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background: #2c3e50;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      font-size: 0.8rem;
      white-space: nowrap;
      z-index: 1000;
    }
    
    .tooltip:hover::before {
      content: '';
      position: absolute;
      bottom: 115%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #2c3e50;
    }
    
    @media (max-width: 768px) {
      .principles-grid {
        grid-template-columns: 1fr;
      }
      
      .code-comparison {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .col-2, .col-3 {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🎯 OOCSS - Object Oriented CSS</h1>
      <p>Write reusable, scalable CSS with separation of structure and skin</p>
    </div>
    
    <!-- Principle 1: Separate Structure from Skin -->
    <div class="principles-grid">
      <div class="principle-card">
        <h3>🏗️ Separate Structure from Skin</h3>
        <p>Structure deals with layout and positioning, while skin deals with colors, fonts, and visual styles.</p>
        
        <div class="code-comparison">
          <div class="good-code">
            <span class="comment">/* OOCSS Approach */</span><br>
            <span class="selector">.card</span> {<br>
            &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">1.5rem</span>;<br>
            &nbsp;&nbsp;<span class="property">border-radius</span>: <span class="value">12px</span>;<br>
            &nbsp;&nbsp;<span class="property">box-shadow</span>: <span class="value">0 4px 20px rgba(0,0,0,0.1)</span>;<br>
            }<br><br>
            
            <span class="selector">.social-theme</span> {<br>
            &nbsp;&nbsp;<span class="property">background</span>: <span class="value">linear-gradient(45deg, #ff6b6b, #ee5a24)</span>;<br>
            &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
            }<br><br>
            
            <span class="selector">.dark-theme</span> {<br>
            &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#2c3e50</span>;<br>
            &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
            }
          </div>
          
          <div class="bad-code">
            <span class="comment">/* Traditional Approach */</span><br>
            <span class="selector">.social-card</span> {<br>
            &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">1.5rem</span>;<br>
            &nbsp;&nbsp;<span class="property">border-radius</span>: <span class="value">12px</span>;<br>
            &nbsp;&nbsp;<span class="property">box-shadow</span>: <span class="value">0 4px 20px rgba(0,0,0,0.1)</span>;<br>
            &nbsp;&nbsp;<span class="property">background</span>: <span class="value">linear-gradient(45deg, #ff6b6b, #ee5a24)</span>;<br>
            &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
            }<br><br>
            
            <span class="selector">.dark-card</span> {<br>
            &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">1.5rem</span>;<br>
            &nbsp;&nbsp;<span class="property">border-radius</span>: <span class="value">12px</span>;<br>
            &nbsp;&nbsp;<span class="property">box-shadow</span>: <span class="value">0 4px 20px rgba(0,0,0,0.1)</span>;<br>
            &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#2c3e50</span>;<br>
            &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
            }
          </div>
        </div>
      </div>
      
      <!-- Principle 2: Separate Container from Content -->
      <div class="principle-card">
        <h3>📦 Separate Container from Content</h3>
        <p>Styles shouldn't depend on where an element is placed. Content should look the same regardless of container.</p>
        
        <div class="code-comparison">
          <div class="good-code">
            <span class="comment">/* OOCSS Approach */</span><br>
            <span class="selector">.btn</span> {<br>
            &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">0.75rem 1.5rem</span>;<br>
            &nbsp;&nbsp;<span class="property">border-radius</span>: <span class="value">8px</span>;<br>
            &nbsp;&nbsp;<span class="property">font-weight</span>: <span class="value">600</span>;<br>
            &nbsp;&nbsp;<span class="property">border</span>: <span class="value">none</span>;<br>
            }<br><br>
            
            <span class="selector">.btn-primary</span> {<br>
            &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#3498db</span>;<br>
            &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
            }<br><br>
            
            <span class="comment">/* Works anywhere! */</span><br>
            &lt;header&gt;<br>
            &nbsp;&nbsp;&lt;button class="btn btn-primary"&gt;Sign Up&lt;/button&gt;<br>
            &lt;/header&gt;<br>
            &lt;footer&gt;<br>
            &nbsp;&nbsp;&lt;button class="btn btn-primary"&gt;Subscribe&lt;/button&gt;<br>
            &lt;/footer&gt;
          </div>
          
          <div class="bad-code">
            <span class="comment">/* Traditional Approach */</span><br>
            <span class="selector">header button</span> {<br>
            &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">0.75rem 1.5rem</span>;<br>
            &nbsp;&nbsp;<span class="property">border-radius</span>: <span class="value">8px</span>;<br>
            &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#3498db</span>;<br>
            &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
            }<br><br>
            
            <span class="selector">footer button</span> {<br>
            &nbsp;&nbsp;<span class="property">padding</span>: <span class="value">0.75rem 1.5rem</span>;<br>
            &nbsp;&nbsp;<span class="property">border-radius</span>: <span class="value">8px</span>;<br>
            &nbsp;&nbsp;<span class="property">background</span>: <span class="value">#3498db</span>;<br>
            &nbsp;&nbsp;<span class="property">color</span>: <span class="value">white</span>;<br>
            }<br><br>
            
            <span class="comment">/* Duplicated code! */</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-area">
      <h2>🚀 OOCSS in Action - Modern UI Components</h2>
      
      <h3>Social Media Profile Cards</h3>
      <div class="grid col-3 gap-2">
        <div class="card-skin">
          <div class="flex between center">
            <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="Profile" class="profile">
            <span class="badge badge-success">Online</span>
          </div>
          <h4 style="margin: 1rem 0 0.5rem;">Alex Johnson</h4>
          <p style="color: #7f8c8d; margin-bottom: 1rem;">Full Stack Developer</p>
          <div class="flex between center">
            <div class="stats">
              <span class="stat-number">127</span>
              <span class="stat-label">Posts</span>
            </div>
            <div class="stats">
              <span class="stat-number">2.4K</span>
              <span class="stat-label">Followers</span>
            </div>
            <div class="stats">
              <span class="stat-number">387</span>
              <span class="stat-label">Following</span>
            </div>
          </div>
        </div>
        
        <div class="card-skin social-card">
          <div class="flex between center">
            <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='%23ffffff'/%3E%3C/svg%3E" alt="Profile" class="profile">
            <span class="badge badge-ghost">Away</span>
          </div>
          <h4 style="margin: 1rem 0 0.5rem;">Sarah Chen</h4>
          <p style="color: rgba(255,255,255,0.8); margin-bottom: 1rem;">UI/UX Designer</p>
          <button class="btn btn-ghost">Follow</button>
        </div>
        
        <div class="card-skin dark-card">
          <div class="flex between center">
            <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='%232ecc71'/%3E%3C/svg%3E" alt="Profile" class="profile">
            <span class="badge badge-warning">Busy</span>
          </div>
          <h4 style="margin: 1rem 0 0.5rem;">Mike Rodriguez</h4>
          <p style="color: #bdc3c7; margin-bottom: 1rem;">DevOps Engineer</p>
          <div class="flex gap-1">
            <button class="btn btn-primary">Message</button>
            <button class="btn btn-ghost">Connect</button>
          </div>
        </div>
      </div>
      
      <h3 style="margin-top: 2rem;">Notification System</h3>
      <div style="max-width: 500px;">
        <div class="notification notification-success">
          <strong>🎉 Success!</strong> Your profile has been updated successfully.
        </div>
        <div class="notification notification-warning">
          <strong>⚠️ Warning:</strong> Your storage is almost full (85% used).
        </div>
        <div class="notification notification-error">
          <strong>❌ Error:</strong> Failed to send message. Please try again.
        </div>
      </div>
      
      <h3 style="margin-top: 2rem;">Interactive Elements</h3>
      <div class="flex gap-1 wrap">
        <button class="btn btn-primary">
          <svg class="icon" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
          </svg>
          Add Friend
        </button>
        
        <button class="btn btn-social">
          <svg class="icon" viewBox="0 0 24 24">
            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
          </svg>
          Tweet This
        </button>
        
        <button class="btn btn-ghost">
          <svg class="icon" viewBox="0 0 24 24">
            <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/>
          </svg>
          Save to Wishlist
        </button>
        
        <span class="tooltip" data-tooltip="This feature is coming soon!">
          <button class="btn btn-ghost" disabled>
            <svg class="icon" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
            </svg>
            Coming Soon
          </button>
        </span>
      </div>
    </div>
    
    <div class="card-skin">
      <h3>💡 Why Use OOCSS?</h3>
      <div class="grid col-2 gap-2">
        <div>
          <h4>🎯 Benefits</h4>
          <ul>
            <li><strong>Reusability:</strong> Components work anywhere</li>
            <li><strong>Scalability:</strong> Easy to maintain and extend</li>
            <li><strong>Performance:</strong> Smaller CSS files</li>
            <li><strong>Consistency:</strong> Uniform design language</li>
            <li><strong>Team Collaboration:</strong> Clear separation of concerns</li>
          </ul>
        </div>
        <div>
          <h4>🚀 Real-World Impact</h4>
          <ul>
            <li>Faster development cycles</li>
            <li>Easier theme switching</li>
            <li>Better component isolation</li>
            <li>Reduced CSS specificity issues</li>
            <li>Improved developer experience</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Modern OOCSS Patterns

Media Object

The classic OOCSS pattern for content with images and text.

.media-object {

display: flex;

gap: 1rem;

}

Layout Primitives

Reusable layout classes for common patterns.

.stack, .cluster, .sidebar

.grid, .flex, .center

.gap-1, .gap-2, .col-2

OOCSS Patterns Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OOCSS Patterns - Modern Web Components</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);
    }
    
    .patterns-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .pattern-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .demo-section {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
    }
    
    /* Advanced OOCSS Patterns */
    
    /* Layout System */
    .stack { display: flex; flex-direction: column; }
    .stack > * + * { margin-top: 1rem; }
    .stack-sm > * + * { margin-top: 0.5rem; }
    .stack-lg > * + * { margin-top: 2rem; }
    
    .cluster { display: flex; flex-wrap: wrap; gap: 1rem; }
    .cluster-sm { gap: 0.5rem; }
    .cluster-lg { gap: 2rem; }
    
    .sidebar { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; }
    .sidebar-right { grid-template-columns: 1fr 250px; }
    
    /* Component Patterns */
    .media-object {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }
    
    .media-object--center { align-items: center; }
    .media-object--reverse { flex-direction: row-reverse; }
    
    .card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
    
    .card--interactive { 
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .card--interactive:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }
    
    .card--bordered { border: 1px solid #e1e8ed; }
    .card--flat { box-shadow: none; border: 1px solid #e1e8ed; }
    
    /* Modern UI Components */
    .pricing-card {
      position: relative;
      overflow: hidden;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }
    
    .pricing-card--popular {
      border-color: #3498db;
      transform: scale(1.05);
    }
    
    .pricing-card--popular::before {
      content: 'Most Popular';
      position: absolute;
      top: 0;
      right: 0;
      background: #3498db;
      color: white;
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
      font-weight: bold;
      border-bottom-left-radius: 8px;
    }
    
    .feature-list { list-style: none; }
    .feature-list li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }
    
    .feature-list li::before {
      content: '✓';
      color: #2ecc71;
      font-weight: bold;
    }
    
    .feature-list--muted li::before { color: #bdc3c7; }
    
    .progress-bar {
      height: 8px;
      background: #ecf0f1;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #3498db, #2ecc71);
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    
    .progress-fill--warning { background: linear-gradient(90deg, #f39c12, #e74c3c); }
    .progress-fill--success { background: linear-gradient(90deg, #2ecc71, #27ae60); }
    
    /* Dark Theme Variants */
    .theme-dark {
      background: #2c3e50;
      color: white;
    }
    
    .theme-dark .card {
      background: #34495e;
      color: white;
    }
    
    .theme-dark .progress-bar {
      background: #2c3e50;
    }
    
    /* Utility Classes */
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    
    .text-sm { font-size: 0.875rem; }
    .text-lg { font-size: 1.125rem; }
    .text-xl { font-size: 1.25rem; }
    .text-2xl { font-size: 1.5rem; }
    
    .font-light { font-weight: 300; }
    .font-normal { font-weight: 400; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    
    .m-0 { margin: 0; }
    .m-1 { margin: 0.5rem; }
    .m-2 { margin: 1rem; }
    .m-4 { margin: 2rem; }
    
    .p-0 { padding: 0; }
    .p-1 { padding: 0.5rem; }
    .p-2 { padding: 1rem; }
    .p-4 { padding: 2rem; }
    
    .rounded { border-radius: 6px; }
    .rounded-lg { border-radius: 12px; }
    .rounded-full { border-radius: 9999px; }
    
    .shadow { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .shadow-lg { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
    .shadow-xl { box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
    
    @media (max-width: 768px) {
      .patterns-grid {
        grid-template-columns: 1fr;
      }
      
      .sidebar {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>⚡ OOCSS Patterns</h1>
      <p>Reusable component patterns for modern web development</p>
    </div>
    
    <!-- Media Object Pattern -->
    <div class="patterns-grid">
      <div class="pattern-card">
        <h3>🎭 Media Object Pattern</h3>
        <p>The classic OOCSS pattern for content with an image and text.</p>
        
        <div class="demo-section">
          <div class="media-object">
            <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" style="width: 60px; height: 60px; border-radius: 8px;">
            <div>
              <h4 class="m-0">Media Object Title</h4>
              <p class="m-0 text-sm">This is the media object content. It can contain any type of content and works with different alignments.</p>
            </div>
          </div>
          
          <div class="media-object media-object--center" style="margin-top: 1rem;">
            <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='%232ecc71'/%3E%3C/svg%3E" alt="Avatar" style="width: 40px; height: 40px; border-radius: 8px;">
            <div>
              <h4 class="m-0 text-sm">Centered Alignment</h4>
              <p class="m-0 text-sm">This media object uses center alignment.</p>
            </div>
          </div>
          
          <div class="media-object media-object--reverse" style="margin-top: 1rem;">
            <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='%23e74c3c'/%3E%3C/svg%3E" alt="Avatar" style="width: 60px; height: 60px; border-radius: 8px;">
            <div>
              <h4 class="m-0">Reversed Layout</h4>
              <p class="m-0 text-sm">This media object is reversed with image on the right.</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Card Component Variations -->
      <div class="pattern-card">
        <h3>🎴 Card Component Variations</h3>
        <p>Reusable card components with different skins and behaviors.</p>
        
        <div class="demo-section">
          <div class="cluster">
            <div class="card card--bordered">
              <h4 class="m-0">Basic Card</h4>
              <p class="m-0 text-sm">Simple bordered card</p>
            </div>
            
            <div class="card card--interactive">
              <h4 class="m-0">Interactive Card</h4>
              <p class="m-0 text-sm">Hover to see effect</p>
            </div>
            
            <div class="card card--flat">
              <h4 class="m-0">Flat Card</h4>
              <p class="m-0 text-sm">No shadow, just border</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Pricing Cards -->
    <div class="pattern-card">
      <h3>💰 Pricing Cards</h3>
      <p>Complex component built from simple, reusable classes.</p>
      
      <div class="demo-section">
        <div class="cluster">
          <div class="card pricing-card" style="width: 250px;">
            <div class="stack text-center">
              <h3 class="m-0">Starter</h3>
              <div class="text-2xl font-bold">$19<span class="text-sm font-normal">/mo</span></div>
              <p class="text-sm">Perfect for small projects</p>
              <button class="btn btn-ghost" style="margin-top: 1rem;">Get Started</button>
              <ul class="feature-list stack-sm" style="margin-top: 1rem;">
                <li class="text-sm">5 Projects</li>
                <li class="text-sm">10GB Storage</li>
                <li class="text-sm">Basic Support</li>
              </ul>
            </div>
          </div>
          
          <div class="card pricing-card pricing-card--popular" style="width: 250px;">
            <div class="stack text-center">
              <h3 class="m-0">Professional</h3>
              <div class="text-2xl font-bold">$49<span class="text-sm font-normal">/mo</span></div>
              <p class="text-sm">For growing businesses</p>
              <button class="btn btn-primary" style="margin-top: 1rem;">Get Started</button>
              <ul class="feature-list stack-sm" style="margin-top: 1rem;">
                <li class="text-sm">Unlimited Projects</li>
                <li class="text-sm">100GB Storage</li>
                <li class="text-sm">Priority Support</li>
                <li class="text-sm">Advanced Analytics</li>
              </ul>
            </div>
          </div>
          
          <div class="card pricing-card" style="width: 250px;">
            <div class="stack text-center">
              <h3 class="m-0">Enterprise</h3>
              <div class="text-2xl font-bold">$99<span class="text-sm font-normal">/mo</span></div>
              <p class="text-sm">For large organizations</p>
              <button class="btn btn-ghost" style="margin-top: 1rem;">Contact Sales</button>
              <ul class="feature-list stack-sm" style="margin-top: 1rem;">
                <li class="text-sm">Unlimited Everything</li>
                <li class="text-sm">1TB Storage</li>
                <li class="text-sm">24/7 Support</li>
                <li class="text-sm">Custom Solutions</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Progress System -->
    <div class="pattern-card">
      <h3>📊 Progress System</h3>
      <p>Reusable progress bars with different states and themes.</p>
      
      <div class="demo-section">
        <div class="stack">
          <div>
            <div class="flex between">
              <span>Storage Usage</span>
              <span>65%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 65%"></div>
            </div>
          </div>
          
          <div>
            <div class="flex between">
              <span>CPU Usage</span>
              <span>85%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill progress-fill--warning" style="width: 85%"></div>
            </div>
          </div>
          
          <div>
            <div class="flex between">
              <span>Task Completion</span>
              <span>100%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill progress-fill--success" style="width: 100%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Theme Switching -->
    <div class="pattern-card">
      <h3>🌙 Theme Switching</h3>
      <p>Easy theme switching with OOCSS skin classes.</p>
      
      <div class="demo-section theme-dark">
        <div class="cluster">
          <div class="card">
            <h4 class="m-0">Dark Theme Card</h4>
            <p class="m-0 text-sm">Same structure, different skin</p>
          </div>
          
          <div class="card card--interactive">
            <h4 class="m-0">Interactive Dark Card</h4>
            <p class="m-0 text-sm">Hover effect works in dark theme too</p>
          </div>
        </div>
        
        <div class="progress-bar" style="margin-top: 1rem;">
          <div class="progress-fill" style="width: 75%"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

OOCSS Best Practices

Single Responsibility Principle

Each CSS class should have one clear purpose. Structure classes handle layout, skin classes handle appearance, and behavior classes handle interactions.

// Good: Separate responsibilities

.card { padding: 1rem; } // structure

.card--featured { background: blue; } // skin

.card--interactive { cursor: pointer; } // behavior

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>OOCSS 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>✅ OOCSS Best Practices</h1>
      <p>Build scalable, maintainable CSS with Object Oriented principles</p>
    </div>
    
    <div class="practices-grid">
      <div class="practice-card">
        <h3>📏 Keep Classes Single-Purpose</h3>
        <p>Each class should have one clear responsibility.</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Single Responsibility</strong>
            <div class="good-example">
              .card { /* structure */ }<br>
              .card--featured { /* skin */ }<br>
              .card--interactive { /* behavior */ }
            </div>
          </div>
          <div class="dont">
            <strong>❌ Multiple Responsibilities</strong>
            <div class="bad-example">
              .featured-interactive-card {<br>
              &nbsp;&nbsp;/* structure + skin + behavior */<br>
              }
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🎯 Use Semantic Naming</h3>
        <p>Name classes based on purpose, not appearance.</p>
        
        <div class="do-dont">
          <div class="do">
            <strong>✅ Semantic Names</strong>
            <div class="good-example">
              .btn--primary<br>
              .card--featured<br>
              .alert--success
            </div>
          </div>
          <div class="dont">
            <strong>❌ Presentational Names</strong>
            <div class="bad-example">
              .btn--blue<br>
              .card--shadow<br>
              .alert--green
            </div>
          </div>
        </div>
      </div>
      
      <div class="practice-card">
        <h3>🏗️ Build from Simple to Complex</h3>
        <p>Start with base classes and extend with modifiers.</p>
        
        <div class="performance-tips">
          <strong>💡 Composition Over Inheritance:</strong><br>
          Build complex components by combining simple, reusable classes rather than creating deep inheritance chains.
        </div>
        
        <div class="good-example">
          &lt;div class="card card--interactive card--featured"&gt;<br>
          &nbsp;&nbsp;&lt;div class="stack"&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3 class="text-xl"&gt;Title&lt;/h3&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="text-sm"&gt;Content&lt;/p&gt;<br>
          &nbsp;&nbsp;&lt;/div&gt;<br>
          &lt;/div&gt;
        </div>
      </div>
      
      <div class="practice-card">
        <h3>⚡ Performance Considerations</h3>
        <p>Optimize for performance while maintaining reusability.</p>
        
        <div class="performance-tips">
          <strong>💡 Performance Tips:</strong>
          <ul>
            <li>Keep CSS specificity low</li>
            <li>Use utility classes for common patterns</li>
            <li>Avoid deeply nested selectors</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>🚀 OOCSS Workflow</h3>
      
      <div class="workflow-steps">
        <div class="step">
          <div class="step-number">1</div>
          <h4>Identify Patterns</h4>
          <p>Find repeating visual patterns in your design</p>
        </div>
        
        <div class="step">
          <div class="step-number">2</div>
          <h4>Extract Structure</h4>
          <p>Create base classes for layout and positioning</p>
        </div>
        
        <div class="step">
          <div class="step-number">3</div>
          <h4>Define Skins</h4>
          <p>Create skin classes for colors and visual styles</p>
        </div>
        
        <div class="step">
          <div class="step-number">4</div>
          <h4>Compose Components</h4>
          <p>Combine classes to build complex components</p>
        </div>
        
        <div class="step">
          <div class="step-number">5</div>
          <h4>Test & Refactor</h4>
          <p>Verify reusability and optimize patterns</p>
        </div>
      </div>
    </div>
    
    <div class="team-guidelines">
      <h3>👥 Team Guidelines</h3>
      <p><strong>For successful OOCSS implementation in teams:</strong></p>
      <ul>
        <li>Create a shared pattern library</li>
        <li>Establish naming conventions early</li>
        <li>Use linters to enforce OOCSS principles</li>
        <li>Document component usage and combinations</li>
        <li>Regularly review and refactor CSS</li>
        <li>Encourage composition over duplication</li>
      </ul>
    </div>
    
    <div class="common-pitfalls">
      <h3>⚠️ Common Pitfalls</h3>
      <p><strong>Avoid these common OOCSS mistakes:</strong></p>
      <ul>
        <li><strong>Over-abstraction:</strong> Creating too many tiny classes</li>
        <li><strong>Naming confusion:</strong> Inconsistent or unclear class names</li>
        <li><strong>Specificity wars:</strong> Mixing OOCSS with overly specific selectors</li>
        <li><strong>HTML bloat:</strong> Too many classes on single elements</li>
        <li><strong>Performance issues:</strong> Large CSS files with unused classes</li>
        <li><strong>Maintenance complexity:</strong> Hard-to-find style definitions</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 OOCSS principles</li>
            <li><strong>Sass:</strong> For organization and mixins</li>
            <li><strong>PostCSS:</strong> For CSS processing</li>
            <li><strong>Storybook:</strong> For component documentation</li>
            <li><strong>CSS Stats:</strong> For performance analysis</li>
          </ul>
        </div>
        <div class="dont">
          <strong>❌ Things to Avoid</strong>
          <ul>
            <li>Manual class name management</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>

OOCSS vs Other CSS Methodologies

🎯 OOCSS

Structure/Skin separation, high reusability

🏗️ BEM

Strict naming, component-focused

⚡ Utility-First

Single-purpose classes, rapid development

Methodology Comparison

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OOCSS 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>⚖️ OOCSS vs Other Methodologies</h1>
      <p>Compare OOCSS with BEM, SMACSS, and Utility-First CSS</p>
    </div>
    
    <div class="methodology-grid">
      <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>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>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, .is-hidden
        </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>OOCSS</th>
            <th>BEM</th>
            <th>SMACSS</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>Reusability</strong></td>
            <td>Excellent</td>
            <td>Good</td>
            <td>Good</td>
            <td>Excellent</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>Small</td>
            <td>Moderate</td>
            <td>Moderate</td>
            <td>Large</td>
          </tr>
          <tr>
            <td><strong>Team Adoption</strong></td>
            <td>Easy</td>
            <td>Easy with guidelines</td>
            <td>Moderate</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>
          <tr>
            <td><strong>Performance</strong></td>
            <td>Excellent</td>
            <td>Good</td>
            <td>Good</td>
            <td>Good</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="comparison-section">
      <h2>🎯 OOCSS: Pros and Cons</h2>
      
      <div class="pros-cons">
        <div class="pros">
          <h3>✅ Advantages</h3>
          <ul>
            <li><strong>High Reusability:</strong> Components work anywhere</li>
            <li><strong>Excellent Performance:</strong> Small, efficient CSS</li>
            <li><strong>Flexible:</strong> Easy to modify and extend</li>
            <li><strong>Scalable:</strong> Works well in large projects</li>
            <li><strong>Team Friendly:</strong> Intuitive concepts</li>
            <li><strong>Themeable:</strong> Easy skin switching</li>
          </ul>
        </div>
        
        <div class="cons">
          <h3>❌ Disadvantages</h3>
          <ul>
            <li><strong>HTML Bloat:</strong> Multiple classes per element</li>
            <li><strong>Naming Challenges:</strong> Requires good naming strategy</li>
            <li><strong>Learning Curve:</strong> Team needs to understand principles</li>
            <li><strong>Over-Abstraction Risk:</strong> Can create too many classes</li>
            <li><strong>Documentation Needed:</strong> Requires pattern documentation</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="comparison-section">
      <h2>🔍 Code Comparison</h2>
      
      <div class="code-examples">
        <div class="code-example">
          <strong>OOCSS Approach</strong><br><br>
          &lt;div class="media-object card card--interactive"&gt;<br>
          &nbsp;&nbsp;&lt;img class="profile" src="..."&gt;<br>
          &nbsp;&nbsp;&lt;div class="stack"&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;h3 class="text-xl"&gt;Title&lt;/h3&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="text-sm"&gt;Content&lt;/p&gt;<br>
          &nbsp;&nbsp;&lt;/div&gt;<br>
          &lt;/div&gt;
        </div>
        
        <div class="code-example">
          <strong>BEM Approach</strong><br><br>
          &lt;div class="card card--interactive"&gt;<br>
          &nbsp;&nbsp;&lt;div class="card__media"&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;img class="card__image" src="..."&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="card__content"&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3 class="card__title"&gt;Title&lt;/h3&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="card__text"&gt;Content&lt;/p&gt;<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
          &nbsp;&nbsp;&lt;/div&gt;<br>
          &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 OOCSS For:</h4>
          <ul>
            <li>Performance-critical applications</li>
            <li>Large, complex component libraries</li>
            <li>Projects requiring high reusability</li>
            <li>When CSS file size matters</li>
            <li>Teams familiar with OOP concepts</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use BEM For:</h4>
          <ul>
            <li>Structured, predictable CSS</li>
            <li>Team environments needing strict guidelines</li>
            <li>Component-based architectures</li>
            <li>When clarity is prioritized over brevity</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use SMACSS For:</h4>
          <ul>
            <li>Well-organized, categorized CSS</li>
            <li>Projects with multiple layout types</li>
            <li>When you need clear separation of concerns</li>
            <li>Large-scale applications</li>
          </ul>
        </div>
        
        <div class="use-case">
          <h4>✅ Use Utility-First For:</h4>
          <ul>
            <li>Rapid prototyping and development</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 OOCSS when:</strong> You need high performance, maximum reusability, 
      and flexibility in your CSS architecture. It's perfect for large applications where 
      CSS file size and maintainability are critical.</p>
      
      <p><strong>Consider alternatives when:</strong> You prefer more structure (BEM), 
      need strict naming conventions, or want the rapid development of utility classes.</p>
      
      <p><strong>Hybrid Approach:</strong> Many successful projects combine OOCSS principles 
      with concepts from other methodologies, using OOCSS for components and utilities for layouts.</p>
    </div>
    
    <div class="comparison-section">
      <h2>🚀 Modern Trends & OOCSS</h2>
      <p><strong>How OOCSS fits into modern web development:</strong></p>
      
      <div class="pros-cons">
        <div class="pros">
          <h4>OOCSS in 2024</h4>
          <ul>
            <li><strong>CSS-in-JS:</strong> OOCSS principles apply to styled-components</li>
            <li><strong>Design Systems:</strong> Perfect for component libraries</li>
            <li><strong>Performance:</strong> More relevant than ever with Core Web Vitals</li>
            <li><strong>Utility-First:</strong> OOCSS inspired modern utility frameworks</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 OOCSS concepts</li>
            <li>Project scale and performance requirements</li>
            <li>Integration with modern frameworks</li>
            <li>Tooling and build process setup</li>
            <li>Long-term maintenance strategy</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Practical Applications

🏗️ Modern Web Components

Social media profile cards
E-commerce product listings
Dashboard widgets and metrics
Notification systems
Form components and validation

🔧 Real-World Patterns

Identify repeating visual patterns
Extract structure and skin classes
Create utility classes for common values
Document component combinations
Establish naming conventions

💡 Pro Tips for Effective OOCSS

Development:

Start with mobile-first structure classes
Use semantic names for skin classes
Create a living style guide
Test components in different contexts

Performance:

Keep CSS specificity low
Use utility classes for common values
Minimize duplication with mixins
Consider critical CSS for above-the-fold

Ready to Master OOCSS? 🎯

Start using Object Oriented CSS to create reusable, scalable components that work anywhere in your application. Build complex UIs from simple, composable pieces and never write the same CSS twice.

< Previous Next >