CSS：我应该使用mixin还是类？

Question

I am using the boostrap CSS framework for one of my personal projects. By default all the col- classes have a padding on both sides. Which is good for some components. But there are places where I don't want this extra padding. So I usually just take a unique class (say containerName ) being used to style that element and then-

.containerName {
 padding-right: 0;
 padding-left: 0;
 //and whatever other css is required
}

I don't want to keep writing this again and again . So I decided to write a simple mixin just for that.

%removePadding { 
padding-right: 0; 
padding-left: 0;
}

and then use extend on .containerName

.containerName {
 @extend %removePadding;
 //and whatever other css is required
}

Is this an overkill? Should I just add another class to those elements which has these two rules?

What is the best way to handle this?

Answer 1

I think you should use ".removePadding" as a class, once. Because in any case, you need to check which divs you want the padding, and which divs you don't. So if you just add ".removePadding" class to your div, right after your col-... class, you will have the same control, and more important than that, you won't be expanding your CSS file. And on the other hand, you can unterstand what is going on just by looking at your HTML file. Like common ".clearfix" classes.

Add this CSS rule (.removePadding class) after the bootstrap styles, to override them.