*(Skip this paragraph if you don't want to read about my infatuation with
OOCSS)* Within the past 6 months or so, I've been implementing OOCSS
principles into my team's workflow and have had some amazing results. It's
an absolutely beautiful feeling to simply link to our "bootstrap" css file
and simply write HTML and suddenly have a working page with all of the
styling you'd hope for. It's sped up our development time and has made the
step from photoshop to a full, working prototype into a matter of hours
rather than days. It's astonishing and I'm constantly discovering new magic
in the OOCSS framework *(end infatuation/glowing OOCSS review)*.
Recently I've become intrigued with the box model border-box in combination
with a grid system with the goal to ease responsive design/percentage
The way I've basically set it up is to make the .unit class a border-box
with internal padding. This is done instead of adding padding to every html
tag that might reside in within a unit (as is the case in the OOCSS
framework example). Adding default padding on multiple objects feels strict
and inefficient to me.
To add some flexiblity, I've also included a class that eliminates padding
on a unit (or really any object with default padding).
My question: Is this bad practice? And what might be some pitfalls I'll run
into going this route? I've yet to run into any troubles, but I often find
myself trying to "outthink" the original OOCSS framework and finding
problems much later. Note that my main browsers of focus are IE8+, FF,
Chrome, and Safari.
Thanks in advance.