HiveBrain v1.2.0
Get Started
← Back to all entries
debughtmlMinor

OOCSS: Is this broken down too much?

Submitted by: @import:stackexchange-codereview··
0
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.

.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:

.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.