<h3 id="heading-istructions">Istructions:</h3>
<ol>
<li>What is SMACSS?:
<ul>
<li>SMACSS is a CSS architecture designed to help developers write scalable and modular CSS. It breaks down styles into manageable categories to make large projects easier to maintain.</li>
</ul>
</li>
<li>Key Categories:
<ul>
<li>Base: Default styles for HTML elements.
</li>
<li>Layout: Defines the major sections of a page.
</li>
<li>Module: Reusable components like buttons or cards.
</li>
<li>State: Styles for different states (e.g., is-active).
</li>
<li>Theme: Styles for visual variations.
</li>
</ul>
</li>
<li>Advantages:
<ul>
<li>Improves scalability and maintenance of large projects.</li>
</ul>
</li>
<li>Practice:
<ul>
<li>Build a simple webpage using SMACSS principles.</li>
</ul>
</li>
</ol>

### **Istructions:**

1. **What is SMACSS?**:
    
    * **SMACSS** is a CSS architecture designed to help developers write **scalable** and **modular** CSS. It breaks down styles into manageable categories to make large projects easier to maintain.
        
2. **Key Categories**:
    
    * **Base**: Default styles for HTML elements.
        
    * **Layout**: Defines the major sections of a page.
        
    * **Module**: Reusable components like buttons or cards.
        
    * **State**: Styles for different states (e.g., is-active).
        
    * **Theme**: Styles for visual variations.
        
3. **Advantages**:
    
    * Improves **scalability** and **maintenance** of large projects.
        
4. **Practice**:
    
    * Build a simple webpage using SMACSS principles.

Activity 22: Research SMACSS - Scalable and Modular Architecture for CSS

Istructions: