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

John Carlo RegalaJohn Carlo Regala
2 min read

Understanding SMACSS (Scalable and Modular Architecture for CSS)

SMACSS is a CSS architecture aimed at organizing and scaling CSS for large projects. By categorizing styles into Base, Layout, Module, State, and Theme, developers can create manageable, reusable, and consistent styles.

Key SMACSS Categories

  1. Base
    Default styles for HTML elements (e.g., typography, body styles).
    Example: body, h1, p.

  2. Layout
    Styles for the overall page structure (e.g., header, footer, sidebar).
    Example: .layout-header, .layout-footer.

  3. Module
    Reusable, self-contained components (e.g., buttons, cards).
    Example: .button, .card.

  4. State
    Styles for different states (e.g., active, disabled, hidden).
    Example: .is-active, .is-disabled.

  5. Theme
    Visual variations or overrides for styling themes (e.g., dark mode).
    Example: .theme-dark.

SMACSS in Practice: Webpage Example

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SMACSS Example</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="module.css">
    <link rel="stylesheet" href="state.css">
    <link rel="stylesheet" href="theme.css">
</head>
<body>
    <header class="layout-header">
        <h1>SMACSS Webpage</h1>
    </header>

    <main class="layout-main">
        <!-- Card Component -->
        <div class="card">
            <h2 class="card__title">Card Title</h2>
            <p class="card__text">This is a reusable card component styled using SMACSS principles.</p>
            <button class="button">Learn More</button>
        </div>

        <!-- Another Card with State -->
        <div class="card is-disabled">
            <h2 class="card__title">Disabled Card</h2>
            <p class="card__text">This card demonstrates a disabled state.</p>
        </div>
    </main>

    <footer class="layout-footer">
        <p>&copy; 2024 SMACSS Webpage</p>
    </footer>
</body>
</html>

CSS
base.css

body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

h1, h2 {
    margin: 0;
}

p {
    margin: 0 0 1em;
}

layout.css

.layout-header, .layout-footer {
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
}

.layout-main {
    padding: 20px;
}

module.css

.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card__title {
    font-size: 1.5rem;
    color: #007bff;
}

.card__text {
    font-size: 1rem;
    color: #555;
}

.button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

state.css

.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

theme.css

.theme-dark {
    background-color: #333;
    color: #fff;
}

.theme-dark .card {
    background-color: #444;
    color: #ddd;
}

.theme-dark .button {
    background-color: #555;
}

Output:

0
Subscribe to my newsletter

Read articles from John Carlo Regala directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTMLCSSSMACSS

Written by

John Carlo Regala
John Carlo Regala