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

SMACSS (Scalable and Modular Architecture for CSS) is a CSS methodology designed to enhance code organization, reusability, and maintainability, particularly in large-scale projects. It divides styles into distinct categories, making it easier to manage and understand the structure of your CSS.

1. BASE:

   Styles applied to default HTML elements (e.g., <h1>, <p>,<a>) Establishes a foundational style for your website.

   

2. LAYOUT:

   Defines the overall structure and layout of your webpage using CSS grid or flexbox to arrange major sections.

   

3. MODULE:

   Reusable components that can be used throughout your website

   buttons, cards, navigation menus, etc.

   

4. STATE:

   Styles for different states of elements (e.g., hover, active, focus)

   using CSS pseudo-classes to modify styles based on user interactions

   

5. THEME:

   Styles that define the overall visual appearance of your website

   Can be used to create multiple themes or skins.

   

   EXAMPLE:

   

   

   OUTPUT:

   

   REPOSITORY: