*(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
rounding jumps/bugs.

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.

This sounds really interesting, I would love to see some examples of this. Perhaps on codepen or somewhere?

Kristina

Cleecanth,

This sounds really cool. We've been doing some experiments with the same
thing. We just got frustrated adding padding/margins to every imainable
element. We also wanted to be more flexbox-future proof, so we are moving
the grids to something that can automatically become flexbox friendly when
the latest browsers support it (and fall back to the border box method when
older browsers don't).

You can check out our efforts here:

https://github.com/stubbornella/oocss/blob/oocss-sass/components/grid...

I'd love to see your code, to see if we are headed in the same direction.
The biggest stumbling block we hit was supporting older browsers that don't
understand border-box. We did that with margins and negative margin on the
line.

Cheers,
Nicole

On Tue, Nov 13, 2012 at 12:51 AM, Kristina Auckland <kael...@gmail.com>wrote: