48 ms·

The entire point of @extend is so that you don't get the extreme code duplication of mixins. I can't speak authoritatively on LESS since I stopped using it a lo

The entire point of @extend is so that you don't get the extreme code duplication of mixins. I can't speak authoritatively on LESS since I stopped using it a long time ago, but what happens when you apply that `.media` pattern to another selector? It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does. And the point is even @extend can get bloaty when nested, but placeholder tags avoid that problem, and remove the extra pattern classes from the output. So the article is actually advocating that you stop using mixins. Mixins aren't OOCSS, they're just copy and paste made easier.

pknight 14y ago
It's quite easy to create duplicate styles in the output with mixins - the compiler isn't that smart yet, do placeholders avoid all of that? I haven't seen a lot of comparisons or examples that really drive it home so far. I'm actually working on a css post-processor script that optimizes css output. Grouping styles in the most efficient way possible is quite tricky.
- ianstormtaylor 14y ago
  @extend avoids duplication, but by itself it has some other bloat problems. @extend + %placeholders completely avoid duplication. Thing is @mixins aren't supposed to avoid duplication, they just inject, and should keep the declaration in the same position in the stylesheet.
  - pknight 14y ago
    Thanks for expanding on the differences
- deleted 14y ago
  [deleted]
colinsidoti 14y ago
"It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does." This didn't come through entirely until I read the comment. I think an example of what mixins would produce would be helpful. At the end of the day we have two goals: 1) keeping things easy to develop and 2) keeping the CSS filesize as small as possible. Mixins accomplished 1 but not 2. One potentially relevant example is bootstrap's core "btn" class, which has over 50 lines: https://github.com/twitter/bootstrap/blob/master/less/buttons.less https://github.com/twitter/bootstrap/blob/master/less/button... When you want a button in HTML you have to add the btn class, as well as an additional class for that button's styling. IE: btn-large, btn-primary, btn-info Bootstrap could have made this happen with just one class by implementing mixins, but that would result in each btn-primary, btn-info, etc repeating those 50 lines from the btn class. If Bootstrap used @extend instead, that large btn class could be replaced with a multiple selector, IE: .btn-large, .btn-small, .btn-primary, etc. Then the independent styles could be defined below, as they already are, and we would just need one class to add the appropriate button style. I guess they could do that today by just using the long selector instead of .btn, but that makes the file harder to maintain. Let me know if I'm thinking about this wrong.
- ianstormtaylor 14y ago
  Yup, that's completely right! I should probably add a bit about mixins being bloaty, so people don't get the wrong idea.

pknight 14y ago

It's quite easy to create duplicate styles in the output with mixins - the compiler isn't that smart yet, do placeholders avoid all of that? I haven't seen a lot of comparisons or examples that really drive it home so far. I'm actually working on a css post-processor script that optimizes css output. Grouping styles in the most efficient way possible is quite tricky.

ianstormtaylor 14y ago
@extend avoids duplication, but by itself it has some other bloat problems. @extend + %placeholders completely avoid duplication. Thing is @mixins aren't supposed to avoid duplication, they just inject, and should keep the declaration in the same position in the stylesheet.
- pknight 14y ago
  Thanks for expanding on the differences
deleted 14y ago
[deleted]

colinsidoti 14y ago

"It duplicates all the styles, instead of grouping common selectors into one style definition like @extend does." This didn't come through entirely until I read the comment. I think an example of what mixins would produce would be helpful. At the end of the day we have two goals: 1) keeping things easy to develop and 2) keeping the CSS filesize as small as possible. Mixins accomplished 1 but not 2. One potentially relevant example is bootstrap's core "btn" class, which has over 50 lines: https://github.com/twitter/bootstrap/blob/master/less/buttons.less https://github.com/twitter/bootstrap/blob/master/less/button... When you want a button in HTML you have to add the btn class, as well as an additional class for that button's styling. IE: btn-large, btn-primary, btn-info Bootstrap could have made this happen with just one class by implementing mixins, but that would result in each btn-primary, btn-info, etc repeating those 50 lines from the btn class. If Bootstrap used @extend instead, that large btn class could be replaced with a multiple selector, IE: .btn-large, .btn-small, .btn-primary, etc. Then the independent styles could be defined below, as they already are, and we would just need one class to add the appropriate button style. I guess they could do that today by just using the long selector instead of .btn, but that makes the file harder to maintain. Let me know if I'm thinking about this wrong.

ianstormtaylor 14y ago
Yup, that's completely right! I should probably add a bit about mixins being bloaty, so people don't get the wrong idea.