9 ms·

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 approa

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 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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 14y ago
"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.

jenius 14y ago

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 14y ago
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 14y ago
  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 14y ago
    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 14y ago

"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.