For simplicity, let’s call them .box, .box-rounded, .box-rounded, .box-wide, .box-rounded-wide, and so forth. You can see that several of these would be required to cover all the possible box styles. And what's worse, each of them includes a lot of duplicate code.
There is no reason to repeat the basic box css in this situation. Just do .a, .b, .c { basic box css here }
I'd never actually use a class name like .box-rounded-wide, and I hope you wouldn't, either. It just makes for a good example.
If this is a real-world situation it shouldn't be too hard to come up with a real-world example. (If it isn't, there's no reason to talk about it)
About Compass not being the solution: "The problem is simply that most designers and CSS authors aren’t programmers."
Well, they don’t have to anymore. Who needs a "CSS author" or a designer who writes code? Thanks to solutions like Compass, I, as a programmer, gladly do this myself and let the designer, well, design.
For simplicity, let’s call them .box, .box-rounded, .box-rounded, .box-wide, .box-rounded-wide, and so forth. You can see that several of these would be required to cover all the possible box styles. And what's worse, each of them includes a lot of duplicate code.
There is no reason to repeat the basic box css in this situation. Just do .a, .b, .c { basic box css here }
I'd never actually use a class name like .box-rounded-wide, and I hope you wouldn't, either. It just makes for a good example.
If this is a real-world situation it shouldn't be too hard to come up with a real-world example. (If it isn't, there's no reason to talk about it)