Question: I'm in the early stages of a project that is going to amass a very large amount of styles as it grows. We are debating the merits of the CSS preprocessor mixin pattern for DRYing our style code. The benefits are fairly clear when the mixin is parameterized -- nearly every instance would have to be handwritten anyway, and so there's relatively little code bloat, especially if no particular parameterization is used frequently.

However, for unparameterized mixins, it's a bit murkier. Take clearfixing for example. 

In pure CSS, we would probably make a `cf` class and then call for it in the markup wherever necessary. This works nicely, but litters the markup with purely presentational classes.

In SASS, we might escape this by using a mixin to do this:

```
//in _mixins.scss
@mixin clear-fix() {
  &:before, &:after {
    content: '\0020';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    width: 0;
    height: 0;
  }
}

//in my_component.scss
@import 'mixins';

.my_component {
  // styles ...
  @include clear-fix() 
}

```

This has the benefit of centralizing purely presentational concerns and making our style code more maintainable. But the downside is that the compiled CSS will be very unDRY, with the clear-fix mixin repeated verbatim in every block it's mixed into (apply this to any similar CSS pattern we use in this same manner).

My question is whether the repetition of mixed in code is likely to cause any major problems? Or is there another solution I'm not thinking of?

Answer: 
I think the major downside of the example you gave is that you're repeating yourself everywhere you use a clearfix... so in your example, if you have 100 elements that use the `clear-fix` class, you'd have 693 extra lines of CSS that aren't needed.

Two suggestions:

1. I would use mixins only when they take parameters and the CSS properties actually change value. Using "void" mixins seems inefficient as you can just use plain old CSS instead.
2. Check out stubbornella's object-oriented CSS here: <https://github.com/stubbornella/oocss/wiki>. If you abstract out your `clear-fix` mixin into a reusable CSS object, you're way more DRY (though you'd still be repeating yourself a little bit)
Your other option is to use `extend`. This would be a DRYer approach rather than re-using a mixin all the time as it comma separates the selectors rather than duplicating the styles.

**Example**

```
.bacon {      
    color: red; 
}

.smokey {
   @extend .bacon;
}

// Outputs
.bacon, .smokey {
  color: red;
}

```

<http://css-tricks.com/the-extend-concept/>