Act 21 Research OOCSS - Object-Oriented CSS

John Carlo RegalaJohn Carlo Regala
2 min read

Understanding OOCSS (Object-Oriented CSS)

OOCSS (Object-Oriented CSS) is a CSS methodology designed to make styles reusable and modular. By separating structure from appearance and detaching content from containers, developers can create scalable and maintainable stylesheets.

Key Principles of OOCSS

  1. Separation of Structure and Skin
    Split layout and visual styles.
    Example: Define layout properties (e.g., padding, margin) and appearance properties (e.g., color, background) separately.

  2. Separation of Container and Content
    Components should work independently of their placement.
    Example: A button should look consistent whether it's in a form or on a card.

OOCSS 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>OOCSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="layout-box">
        <h1 class="text-heading">Welcome to OOCSS Webpage</h1>
    </header>

    <main class="layout-container">
        <!-- Reusable Card Component -->
        <div class="card">
            <h2 class="card__title">Card Title</h2>
            <p class="card__description">This card demonstrates OOCSS principles.</p>
            <button class="button button--primary">Learn More</button>
        </div>

        <!-- Another Card with Reused Styles -->
        <div class="card">
            <h2 class="card__title">Another Card</h2>
            <p class="card__description">Reuse of card styles makes this design modular.</p>
            <button class="button button--secondary">Cancel</button>
        </div>
    </main>
</body>
</html>

CSS


.layout-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #f4f4f4;
}

.layout-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}


.text-heading {
    font-size: 2rem;
    color: #333;
    margin: 0;
}

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

.card__title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #007bff;
}

.card__description {
    font-size: 1rem;
    margin-bottom: 16px;
    color: #555;
}

.button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button--primary {
    background-color: #007bff;
    color: white;
}

.button--primary:hover {
    background-color: #0056b3;
}

.button--secondary {
    background-color: #6c757d;
    color: white;
}

.button--secondary:hover {
    background-color: #5a6268;
}

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.

HTMLCSSOOCSS

Written by

John Carlo Regala
John Carlo Regala