I love @extend's efficiency... but it's leading to unmaintainable code... any suggestions?

[Aaron Gibralter]

I've been using @extend rather than @include because it cuts down the size of css files by only defining styles once. However, I find myself falling into messy code:

What I'll do is define a set of classes that I expect to reuse a lot; e.g.:

 

// (Using compass's border-radius mixin)

.br-2-2-0-0 {

  @include border-radius(2px 2px 0 0);

}

.br-0-0-2-2 {

  @include border-radius(0 0 2px 2px);

}

.br-2-0-0-2 {

  @include border-radius(2px 0 0 2px);

}

.br-0-2-2-0 {

  @include border-radius(0 2px 2px 0);

}

As you can see, after a while this can get a little excessive as I end up having to manually define 10-20 classes just for border radius. Now I would love it if I could do something like this instead:

#foo {

  @include my-border-radius(2px, 2px, 0, 0);

}

// ... which would define a top level class:

.br-2px-2px-0-0 {

  @include border-radius(2px 2px 0 0);

}

// ... and extend the current selector with that class:

#foo {

  @extend .br-2px-2px-0-0;

}

(https://gist.github.com/912518)

That way I could achieve the space saving in my css files that I get with extend, without having to maintain a crazy collection of classes. Also, another problem with my @extend way is that it limits the reusability of the code. If I want to use the border-radius classes in more than one stylesheet I have to copy/paste the code, or I'll end up with a bunch of unused classes in my css.