OOCSS - Object Oriented CSS
- Seperation of structure from skin
- Seperation of container & content
#btn {
width: 100px;
height: 35px;
border: 1px solid #efefef;
border-radius: 8px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
#form {
width: 500px;
height: 500px;
border: 1px solid #efefef;
border-radius: 8px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
#modal {
width: 800px;
height: 600px;
border: 1px solid #efefef;
border-radius: 8px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
In above stylesheet, border
, border-radius
, box-shadow
seems to be consistent design pattern in the application.
Lets seperate it out.
After applying OOCSS to above stylesheet. It becomes like this
#btn {
width: 100px;
height: 35px;
}
#form {
width: 500px;
height: 500px;
}
#modal {
width: 800px;
height: 600px;
}
.skin {
border: 1px solid #efefef;
border-radius: 8px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
<header></header>
<main></main>
<footer></footer>
header {
width: 960px;
margin: 0 auto;
padding: 0 20px;
background-color: #ccc;
}
main {
width: 960px;
margin: 0 auto;
padding: 20px;
position: relative;
}
footer {
width: 960px;
margin: 0 auto;
padding: 40px 20px;
}
- Some styles above are specific and some are structural.
- If can keep the specific as it is and more the structural styles as module, I can re-use it.
- After applying principle 2 of OOCSS. It becomes like this
<header class="grid"></header>
<main class="grid"></main>
<footer class="grid"></footer>
header {
background-color: #ccc;
padding: 0 20px;
}
main {
padding: 20px;
position: relative;
}
footer {
padding: 40px 20px;
}
.grid {
width: 960px;
margin: 0 auto;
}