OOCSS - Object-Oriented CSS

OOCSS (Object-Oriented CSS) is a CSS methodology that promotes reusability and maintainability by treating elements as "objects" with reusable styles. It encourages separating structure (like layout) from appearance (like colors or fonts), making CSS more modular, scalable, and easier to manage.

Core Principles:

Separation of Structure and Skin: Structure refers to the layout and positioning, while skin refers to visual styling (colors, backgrounds). Keep these aspects independent for flexibility.
- Example: .box { padding: 10px; } (structure) vs. .box--dark { background-color: #333; } (skin)
Separation of Container and Content: Objects (elements) should be styled in a way that allows them to be placed anywhere without being dependent on their parent container.
- Example: A button styled independently can be used across different sections of a page.

By breaking CSS into smaller, reusable components, OOCSS makes code cleaner and reduces duplication.

Now, here’s my example on how we can do and implement this principles when we’re coding with CSS properties.

I have made a simple overview of Funko selling website and here is the result:

Here’s the code snippets for my HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funko Shop</title>
    <link rel="stylesheet" href="OOCSS.css">
</head>
<body>
    <header class="header">
        <h1>Welcome to Funko Shop</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section class="products">
        <h2>Our Funko Collection</h2>
        <div class="product-grid">
            <div class="product-card">
                <img src="images/Aang.webp" alt="Funko 1">
                <h3>Aang Funko Pop</h3>
                <p>₱850.00</p>
                <button class="btn">Buy Now</button>
            </div>
            <div class="product-card">
                <img src="images/zuko.jpg" alt="Funko 2">
                <h3>Zuko Funko Pop</h3>
                <p>₱750.00</p>
                <button class="btn">Buy Now</button>
            </div>
        </div>
    </section>

    <footer class="footer">
        <p>2024 Funko Shop | All Rights Reserved</p>
    </footer>
</body>
</html>

And here’s the CSS property code snippets:


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.header {
    background-color: #ff2a4a;
    padding: 20px;
    text-align: center;
}


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

.header nav ul {
    list-style-type: none;
    margin-top: 10px;
}

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

.header nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}


.products {
    padding: 40px 20px;
    text-align: center;
}

.products h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.product-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.product-card p {
    font-size: 1.2em;
    color: #ff4500;
}

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

.btn:hover {
    background-color: #ff4500;
}

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

And the result of this is:

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