Loquero, Rodney I.'s Blog
SMACSS - Scalable and Modular Architecture for CSS

SMACSS - Scalable and Modular Architecture for CSS

Loquero, Rodney I.'s photo
Loquero, Rodney I.
·

4 min read

SMACSS (Scalable and Modular Architecture for CSS) is a CSS methodology aimed at creating scalable, maintainable, and reusable CSS code. It helps organize styles by breaking them into logical modules, making large projects easier to manage.

Key Concepts:

  1. Base: Default styles for HTML elements (like h1, p, etc.), typically reset or normalize CSS.

    • Example: h1 { font-size: 2em; }

  2. Layout: Styles related to the structure and positioning of major components (e.g., header, footer, sidebar).

    • Example: .header { display: flex; }

  3. Module: Reusable, self-contained components (e.g., cards, buttons). These are the building blocks of your design.

    • Example: .card { padding: 20px; border-radius: 5px; }

  4. State: Styles that describe how modules or layouts change based on user interaction or application state (e.g., active, hidden).

    • Example: .is-hidden { display: none; }

  5. Theme: Styles related to visual appearance, allowing for easy theming of a site (e.g., changing colors, fonts).

    • Example: .theme-light { background-color: #f9f9f9; }

Benefits of SMACSS:

  • Modularity: Encourages reusable components and reduces CSS duplication.

  • Scalability: Helps manage large codebases by structuring CSS logically.

  • Maintainability: Easier to maintain and update styles with organized categories.

By structuring CSS this way, SMACSS promotes clean, organized, and flexible code, especially useful in large projects.

Now, I can show you how I program this and use the process of SMACSS

These code snippets provides you an idea what SMACSS structure looks like to make you code and style more organized.

First, the HTML file of my work. This simple website is about Invincible Comics where it shows every Arc and Compendium of Mark Grayson’s Story.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SMACSS</title>
    <link rel="stylesheet" href="CSS/base.css">
    <link rel="stylesheet" href="CSS/layout.css">
    <link rel="stylesheet" href="CSS/module.css">
    <link rel="stylesheet" href="CSS/state.css">
    <link rel="stylesheet" href="CSS/theme.css">
</head>
<body class="theme-light">
    <header class="layout-header">
        <h1>Books of Invincible</h1>
        <nav class="layout-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main class="layout-main">
        <section class="module-book">
            <h2>Book 1: The Beginning</h2>
            <p>An action-packed start to the Invincible series, following the journey of Mark Grayson.</p>
        </section>

        <section class="module-book">
            <h2>Book 2: Rise of a Hero</h2>
            <p>Mark Grayson faces new challenges as he embraces his role as a hero in a world full of dangers.</p>
        </section>

        <section class="module-book is-hidden">
            <h2>Book 3: The Fall</h2>
            <p>In this emotional arc, Mark deals with personal loss and the weight of responsibility.</p>
        </section>

        <button class="module-button">Show More Books</button>
    </main>

    <footer class="layout-footer">
        <p>2024 Books of Invincible | All Rights Reserved</p>
    </footer>
</body>
</html>

As you can see, there’s not only one but five links for styling, so next I can show you the code snippets for base.css

/* Base styles for elements */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

h1, h2 {
    margin-bottom: 10px;
}

p {
    margin-bottom: 20px;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #333;
}

Next will be layout.css

/* Layout-related styles */
.layout-header {
    background-color: #edff49;
    padding: 20px;
    text-align: center;
}

.layout-header h1 {
    font-size: 2.5em;
    color: #000000;
}

.layout-nav ul {
    margin-top: 10px;
}

.layout-nav ul li {
    display: inline;
    margin-right: 20px;
}

.layout-main {
    padding: 40px 20px;
}

.layout-footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

And module.css

/* Modular component styles */
.module-book {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.module-button {
    background-color: #ff6347;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.module-button:hover {
    background-color: #ff4500;
}

state.css

/* State-based styles */
.is-hidden {
    display: none;
}

And the last stylesheet for my html file is theme.css

/* Theme styles for light and dark modes */
.theme-light {
    background-color: #f9f9f9;
}

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

.theme-dark .layout-header {
    background-color: #444;
}

.theme-dark .module-book {
    background-color: #444;
    color: #fff;
}

.theme-dark .module-button {
    background-color: #007bff;
}

Each of this stylesheet file have a different purpose for styling my HTML elements. The purpose of this is to organize your styling and it will prevent you from being confused on finding where to change some css properties.

So here’s the result of all this:

GitHub Link: https://github.com/rodney-lqr/BasicHTML

CSS3