[akdetrick]

You can either repeat yourself by using "@extend %mypattern" in Sass using this methodology, or repeat yourself in the DOM with ".mypattern" in the OOCSS approach.

Both are elegant ways of handling the same task, but I don't think one is much more DRY than the other.

I'd argue that it's more correct to describe a class once and apply it to many elements (OOCSS) than it is to describe it many times over and apply it to each element individually (Sass @extend).

[jenius]

If you are looking for more power, you can use mixins rather than extends. This way, you do get an additional and very signficant power boost - what previously were utility classes are now functions, which take parameters and have the ability to adapt and flex if you write them correctly.

[lowboy]

Yup, I've been using mixins for a while now to reduce code bloat. It seems like placeholders are degenerate forms of mixins.

edit After more reading, they are most definitely not degenerate forms of mixins. Placeholders FTW!

[jenius]

The one advantage that extends provides is less code bloat (if you use them right) in the compiled product - rather than inserting the same code, extends will add the select to the list with the previous selector. So if you were to write something like this:

.hello { color: red; }

.world { @extends .hello; background: blue }

...it would compile to something like this:

.hello, .world { color: red; }

.world { background: blue; }

na'mean?

[lowboy]

I'm picking up what you're putting down, but I was thinking more placeholders vs. mixins. Although I guess placeholders would avoid this code bloat too, and they can be used as selectors.

[ianstormtaylor]

"I'd argue that it's more correct to describe a class once and apply it to many elements (OOCSS) than it is to describe it many times over and apply it to each element individually (Sass @extend)."

What makes you say that the Sass approach is describing it "many times over"? It's described in one place: the %placeholder declaration. There are three steps in the process:

+ Describe the pattern. + Apply the pattern to components. + Apply the components to elements.

In OOCSS, you:

+ Describe the pattern once. + Apply the pattern n times per component. + Apply the component n times per element.

In OOSass, you:

+ Describe the pattern once. + Apply the pattern once per component. + Apply the component n times per element.

The OOSass is much DRYer because if you've decided already that all .dropdown-menu-item's are going to be `.media` patterns, you do that once. You don't have to keep repeating that decision every time you write a new dropdown.