11
\$\begingroup\$

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.

<div class="gray box">

</div>

<div class="round gray box">

</div>

<div class="gray well box">

</div>
\$\endgroup\$
  • \$\begingroup\$ it really depends on how many you have and how you are combining them \$\endgroup\$ – Yvette Colomb Sep 27 '13 at 15:27
7
\$\begingroup\$

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

<div class="box round gray darkshadow redtext">

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

\$\endgroup\$
6
\$\begingroup\$

Don't Repeat Yourself as a principle doesn't really mean that you NEVER should repeat yourself. It's a general advice to avoid repetition.

First of all, I'd suggest not using single letters for things like small or large. Writing box--large is better. In this case, the letters are quite obvious, but I had to think a couple of seconds about it. Not necessary in my opinion.

Also I don't think it's all too practical to decouple modifiers (speaking in BEM terms) like gray and well from their actual context. This will reduce repetition to some degree, but I don't think there will be any real benefits opposed to this:

.box--grey {
    background-color: grey;
}

In the end you need to make these decisions on your own. You need to work with it. If you feel like working with this extra layer of abstractions, it's completely up to you. ;)

\$\endgroup\$
5
\$\begingroup\$

This is somewhat of a continuation of val's train of thought.

If the choice is between slightly larger CSS or slightly larger markup, you should always choose the larger CSS because it can be cached and reused on each page load. Having slightly larger markup has an additional cost for every single page visited (plus the added maintenance cost).

OOCSS is a myth

There are no objects and there's no true inheritance or anything else resembling the Object Oriented paradigm. All you have are composable classes and bloated markup in the form of classitis. There's nothing inherently wrong with composability when it's used correctly (eg. a flash message that appears after submitting a form might have classes like "message error" or "message success"), but you aren't.

If you genuinely want the promise that OOCSS tries to offer, should look at a CSS preprocessor.

http://memerocket.com/2009/03/28/oocss-sass-fewer-classes-on-your-elements/

Classes and ids should describe the content or element's purpose, not what it should look like

You've indicated that your .box class is intended for "fly out content", so why is it called "box"? Even "fly out" is a poor name. Is it a quotation? Is it a diagram? Is it a collection of tags? Is it a help box? Is it a major element? Is it a call-to-action?

Naming conventions like "small" or "large" should be avoided, though they can be ok if they're explicitly describing the content (eg. an input field marked as being "small" might be 4em wide because it is intended to only have 5-6 characters in it, or a table marked a "narrow" might only have a few columns).

http://css-tricks.com/semantic-class-names/

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.