CODEWITHSUNDEEP
cssoocssbem
Eric Harms
Eric Harms

Reputation: 569

Need help understanding how I should define oocss objects and skins

Before I ask the Question, Here is the code I am referring to:

Box Object

Used to box off content like an Island or Islet in Bootstrap.

.box { margin-bottom: 24px; padding: 12px; }    
.box--s { padding: 8px 12px; }  
.box--l { padding: 24px 12px; }

Round Skin

Makes rounded corners. It is used by several abstraction classes, such as box.

.round { border-radius: 4px; }  
.round--s { border-radius:2px; }    
.round--l { border-radius:8px; }

In code to skin an abstraction, you would write:

<div class="round box">  Example </div>

I have other skins that extend box such as gray, alert, and label.

Now for the Question

I am working on a button object. But since it has the same rules and modifiers as box, and can have the same modifiers of round, should I just declare it a skin? All button does is add about four rules for "appearance" If it messed with the margins or padding I would say it SHOULD be an object.

In code you would write

<a class="round btn box">  Example </a>

Or to resize it smaller

<a class="round btn box box--s">  Example </a>

Is keeping it this dry overkill? What worries me is that a button is such a common element on a page - but really its just extending an object and the modifiers i already have written.

Upvotes: 2

Views: 202

Answers (1)

user2587190
user2587190

Reputation: 59

This all boils down to the question whether we should have global modifiers (like .round, .box) or not. As for me, those have so little semantics associated with them that I prefer to integrate them into individual objects, always. Global things like ".hidden", ".round" or ".green" aren't supposed to be reusable as standalone entities.

So, I'd prefer to have a "button" object that is semantically not the same as a "box". All modifications for that button would be an integral part of that button, not some global classes. If you need to make things round, use modifiers on specific objects; to unify values, you always have your CSS preprocessor with you, that doesn't have to be exposes on the semantic (i.e. class-name based) level.

This is totally my personal opinion, by the way.

Upvotes: 1

Related Questions