css - Need help understanding how I should define oocss objects and skins -

before ask question, here code referring to:

box object

used box off content 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. used several abstraction classes, such box.

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

in code skin abstraction, write:

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

i have other skins extend box such gray, alert, , label.

---

now question

i working on button object. since has same rules , modifiers box, , can have same modifiers of round, should declare skin? button add 4 rules "appearance" if messed margins or padding should object.

in code write

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

or resize smaller

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

is keeping dry overkill? worries me button such common element on page - extending object , modifiers have written.

this boils down question whether should have global modifiers (like .round, .box) or not. me, have little semantics associated them prefer integrate them individual objects, always. global things ".hidden", ".round" or ".green" aren't supposed reusable standalone entities.

so, i'd prefer have "button" object semantically not same "box". modifications button integral part of button, not global classes. if need make things round, use modifiers on specific objects; unify values, have css preprocessor you, doesn't have exposes on semantic (i.e. class-name based) level.

this totally personal opinion, way.