The Principles Of OOCSS
As with any object-based coding method, the purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
Separation of Structure From Skin
Almost every element on a styled Web page has different visual features (i.e. “skins”) that are repeated in different contexts. Think of a website’s branding – the colors, subtle uses of gradients, or visible borders. On the other hand, other generally invisible features (i.e. “structure”) are likewise repeated.
When these different features are abstracted into class-based modules, they become reusable and can be applied to any element and have the same basic result. Let’s compare some before and after code so you can see what I’m talking about.
Before applying OOCSS principles, you might have CSS that looks like this:
#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#box {
width: 400px;
overflow: hidden;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
The three elements above have styles that are unique to each, and they’re applied with the non-reusable ID selector to define the styles. But they also have a number of styles in common. The common styles might exist for branding purposes or consistency of design.
With a little bit of planning and forethought, we can abstract the common styles so the CSS would end up instead like this:
.button {
width: 200px;
height: 50px;
}
.box {
width: 400px;
overflow: hidden;
}
.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}
.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
Now all the elements are using classes, the common styles are combined into a reusable “skin” and nothing is unnecessarily repeated. We just need to apply the “skin” class to all the elements and the result will be the same as what the first example would produce, except with less code and a possiblity for further reuse.
Separation of Containers and Content
The second principle described on the OOCSS GitHub wiki page is the separation of containers from their content. To illustrate why this is important, take the following CSS:
#sidebar h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
This is my activity applying OOCSS.
HTML, CSS and OUTPUT
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/style.css">
<title>Document</title>
</head>
<body>
<header class="header">
<h1 class="header__title">Top Employee of the Month</h1>
</header>
<section class="profile-section">
<div class="profile-card">
<img src="/assets/img/user__default.png" alt="Profile 1" class="profile-card__image">
<h2 class="profile-card__name">Fiercival Toribio</h2>
<p class="profile-card__course">Course: Information Technology</p>
<button class="button card__button card__button--primary">View Profile</button>
</div>
<div class="profile-card">
<img src="/assets/img/user__1.jpg" alt="Profile 2" class="profile-card__image">
<h2 class="profile-card__name">Walter Mark Inductivo</h2>
<p class="profile-card__course">Course: Information Technology</p>
<button class="button card__button card__button--primary">View Profile</button>
</div>
<div class="profile-card">
<img src="/assets/img/user__default.png" alt="Profile 3" class="profile-card__image">
<h2 class="profile-card__name">Roerenz Joseph Cano</h2>
<p class="profile-card__course">Course: Information Technology</p>
<button class="button card__button card__button--primary">View Profile</button>
</div>
</section>
<footer class="footer">
<p class="footer__text">Copyright © 2024 by Walter Mark | All Rights Reserved.</p>
</footer>
</body>
</html>
CSS:
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Structure - Layout and positioning */
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
}
.header, .footer {
padding: 20px;
text-align: center;
}
.header__title {
font-size: 2rem;
}
.profile-section {
background: #1C003B;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.profile-card {
border: 1px solid #220152;
border-radius: 8px;
padding: 50px;
text-align: center;
width: 450px;
}
.profile-card__image {
background-color: rgb(255, 255, 255);
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 15px;
position: relative;
}
.profile-card__name {
position: relative;
font-size: 1.25rem;
margin-bottom: 5px;
}
.profile-card__course {
font-size: 1rem;
margin-bottom: 15px;
}
.button {
padding: 5px 35px;
font-size: 15px;
border: 1px solid #888;
border-radius: 5px;
}
.card__button {
margin-left: 10px;
}
.card__button--primary {
background: #1C003B;
color: #fff;
}
/* Footer Layout */
.footer__text {
font-size: 0.875rem;
}
/* Skin - Visual design, colors, fonts, etc. */
.header {
background-color: #1C003B;
color: white;
z-index: 1000;
box-shadow: rgba(0, 0, 0, 0.7)0 4px 16px;
}
.footer {
background-color: #1C003B;
color: white;
box-shadow: rgba(0, 0, 0, 0.7)0 0px 16px;
}
.profile-card {
background-color: #15002E;
}
.profile-card__name {
color: #ffffff;
}
.profile-card__course {
color: #ffffff;
}
OUTPUT:
Github Link:
https://github.com/Walterific/OOCSS-Object-Oriented-CSS.git
Reference:
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/