14th Jun, 2021
3 min read
> This piece is part of a Learn HTML & CSS series. Check out part 3 here: HTML,
The Cascade and Ways To Think In CSS
OOCSS stands for Object-Oriented CSS. The idea behind OOCSS is that you can
reuse your HTML structures and patterns, meaning
This piece is part of a Learn HTML & CSS series. Check out part 3 here: HTML, The Cascade and Ways To Think In CSS
OOCSS stands for Object-Oriented CSS. The idea behind OOCSS is that you can reuse your HTML structures and patterns, meaning less CSS to deal with in the long run. This makes your stylesheets easier and more efficient to add and maintain over time.
So how does OOCSS work? The first step is to separate your structure from the skin.
Structure is the basic core element that makes the website looks the way it does. When you are looking at structure, you are ignoring the branding elements such as typography, colors, borders, and any other specific stylized features.
Structure is based on the bones of your website. It helps you create the visual structure needed before you can start dressing it up. The structure is not expected to change too much over time. There might be tweaks such as fixing up a mobile web view compatibility issue or spacing in between columns and widget areas. But overall, the structure remains stable. They can act like Lego blocks that you can decorate later on.
Think of the skin as the decorative parts. It’s the bits and pieces that make your website ‘pretty’.
Structure is the basic core element that makes the website looks like the way it does. When you are looking at structure, you are ignoring the branding elements such as typography, colors, borders, and any special effects like hovers.
Think of structure as the base and bones of your website. It helps you create the visual rhythms needed before you can start dressing it up. The structure is not expected to change too much over time. There might be tweaks such as the spacing in between columns or widget areas. But overall, the structure remains stable. Most of the time, the structure is ‘invisible’ to the user and deals with how things are laid out.
The skin is the decorative part. It is bits and pieces that make your website ‘pretty’. Here is a table to help you differentiate the difference between structure and skin.
Take a look at the following CSS below:
The CSS is styling a button but there is unnecessary repetition. This can clutter your stylesheet over time and lead to potential inconsistencies because it requires changes in multiple places.
Based on the concept of OOCSS, you can abstract the above CSS into structures and skins. The width , height, and border-radius are repeated for both button classes, and the property types also falls under the structure side of OOCSS. Only background is different between the two buttons.
If we abstract it out, it means that we can reuse the .button class and only need to swap out the skin classes in our HTML.
Here is the refactored CSS:
.button-light and .button-dark are both skins and decorates the base structure created through .button.
Here’s what it looks like when applied to the HTML:
<a class="btn btn-light" href="#">Home</a>
<a class="btn btn-dark" href="#">Blog</a>
It’s easy to tell the difference between structure and skin once you get the gist of it. However, the scope of structure can get tricky. This is because structure is more than just setting the widths and spacing of things. Structure can be broken down into two further categories: containers and content.
Containers are the things that hold the other elements. These are the usual structural things like <div>, <span>, <article>, <navigation>, and <sidebar>. You don't really see containers.
Then there is the actual content such as <img>, <p>, <input>, and things like buttons. These elements may need extra styling such as positioning and typography. The issue that content often face is that it gets confused with being a skin. This is because things like typography can be both a structure and a skin, based on how it is used. The general rule for OOCSS is that if it's a repeating property, then it's a structure. If it's a variation of the base, then it is a skin.
Continue reading part 5: What Is SMACSS and How Does It Work?
Because who doesn’t want to work more efficiently?
For software developers and engineers, the number of hours worked doesn’t always correlate to productivity. Instead, it can point to inefficiencies — or being stuck on a bug for an unnecessarily long time.
The ability to code quickly and efficiently can
Or pay a fraction of the price if you want to certificate
Let’s get real — University education can get expensive. Or perhaps you’re contemplating switching careers but don’t want to spend 3 years back in school. You don’t need a degree to get into programming. The
We’ve all used git in some form or another. The code versioning system is an
industry staple. With over 40 million users worldwide and 190 million
repositories on GitHub, git is here to stay.
While the concept of git is easy - pull your code, do whatever, save, add,
A quick rundown guide without the lingo and frills
Docker. It’s a little blue whale with a container sitting on its back. We hear
about it from various places but it’s usually just left to the DevOps guy to
Or perhaps you’ve tried to pick