debughtmlMinor
OOCSS: Is this broken down too much?
Viewed 0 times
thismuchtoobrokendownoocss
Problem
Philosophical question: How far should I break down my objects?
Inuit.css and Bootstrap have islands, islets, wells, grayboxes, and other objects that have repeating properties. I don't think it was DRY enough, so I created a generic .box object & a few skins. I am just not sure if this is overkill?
Box Object
Used to fly out content from the rest of the document.
Round Skin
Used to round the corners of an element.
Gray Skin
Generic color
Well Skin
Box specific skin to create wells
It does seem more flexible - but still not sure if I am breaking them down way too much.
Inuit.css and Bootstrap have islands, islets, wells, grayboxes, and other objects that have repeating properties. I don't think it was DRY enough, so I created a generic .box object & a few skins. I am just not sure if this is overkill?
Box Object
Used to fly out content from the rest of the document.
.box
{
margin-bottom: 24px;
padding: 24px;
}
.box--s
{
padding: 12px;
}
.box--l
{
padding: 48px;
}Round Skin
Used to round the corners of an element.
.round
{
border-radius: 4px;
}
.round--s
{
border-radius: 2px;
}
.round--l
{
border-radius: 8px;
}Gray Skin
Generic color
.gray
{
background-color: #eeee
}Well Skin
Box specific skin to create wells
.well
{
box-shadow: inset 2px 2px 2px rgba(0,0,0,.5);
}It does seem more flexible - but still not sure if I am breaking them down way too much.
Solution
This is mostly a personal issue. But, in my opinion, there are 2 issues that are going wrong in your approach.
Making your objects reusable (The main issue in the DRY principle)
In my design, I want to have say 3 designs for boxes. Then, I spend sometime designing them. (that is, creating the style in the CSS). Then, when creating the HTML, I reuse that designs.
In your system, every time that I create a box in HTML, I have to re-design the box
At best, you will end copy-pasting the box from the previous page.
At worst, your web won't have a consistent look.
Hardcoding your style in the HTML
What should your CSS provide you ? The power to change your gray web, that is no longer fancy, to a blue one, without modifying your HTML. But, if your elements have a class that is gray, you will end with:
That, of course, will work; but won't give you an easy time understanding what is going on
Making your objects reusable (The main issue in the DRY principle)
In my design, I want to have say 3 designs for boxes. Then, I spend sometime designing them. (that is, creating the style in the CSS). Then, when creating the HTML, I reuse that designs.
In your system, every time that I create a box in HTML, I have to re-design the box
At best, you will end copy-pasting the box from the previous page.
At worst, your web won't have a consistent look.
Hardcoding your style in the HTML
What should your CSS provide you ? The power to change your gray web, that is no longer fancy, to a blue one, without modifying your HTML. But, if your elements have a class that is gray, you will end with:
.gray {
background-color: blue;
}That, of course, will work; but won't give you an easy time understanding what is going on
Code Snippets
<div class="box round gray darkshadow redtext">.gray {
background-color: blue;
}Context
StackExchange Code Review Q#25968, answer score: 7
Revisions (0)
No revisions yet.