Stop Using Needless Sass Mixins

Sass is a powerful tool – this power makes it easy to misuse. One of the most common ways people misuse Sass is creating mixins that they never needed in the first place. I’m not talking about the cool proof-of-concept “let’s create an icosidodecahedron with CSS” mixins – those have their place. I’m talking about worthless mixins that bloat CSS and serve no one. Let’s look at the mixins you should stop using right now:

Border-Radius Prefixes #

.26%: that’s the total global browser usage that needs a prefix on border-radius. Not 26% – .26%. Firefox 3.6 & down, Chrome 3 & down, Safari 4 & down, iOS 3.2 & down need border-radius prefixes. Before replying with lofty ideals about “no user left behind,” think about what you do for IE6-8. Chances are, you’ve written at least one of those browser off as “unsupported.” You’ve got more than 10x as many IE8 users as you have border-radius prefix users. By now, the best thing to do is consider border-radius to be a progressive enhancement. I’ve never seen a website become unreadable or inaccessible when border-radius was removed.

Box-Shadow Prefixes #

This is the exact same issue as above: there are more older browsers that need prefixes for box-shadow than for border-radius, but it’s still only half a percent. And same as before: this is a progressive enhancement. The box might look prettier with a shadow, but lack of box-shadow isn’t going to obscure its content. As Mitch Hedberg says, “There would never be an escalator temporarily out of order sign, only an escalator temporarily stairs. Sorry for the convenience.”

Anything with Prefixes #

The two examples above never need prefixes ever, but you really shouldn’t be using Sass mixins for any prefixes at all. I know, Compass & Bourbon have libraries to do this for you, but there’s a better way: Autoprefixer. You can add Autoprefixer to any Sass workflow: Grunt, Gulp, Ruby gem CLI, Codekit, etc. It runs immediately after your Sass is compiled and automatically adds & removes browser prefixes based on your requirements. You realize how awesome that is, right? You never have to type @include for prefixes again. This lets you write CSS3 with normal, spec syntax. AutoPrefixer uses current data from caniuse.com to choose prefixes that match your specified browser & usage specifications. Just supporting most recent 3 browser version numbers or browsers with at least 3% usage? Autoprefixer does that automatically: you just type the spec version of the CSS. Transitions, transforms, keyframe animations, flexbox, gradients, etc – all those prefixes are handled automatically. Again, you don’t even need to worry about where to use a mixin: just learn the correct spec syntax & you’re covered.

Opacity #

Everybody but IE8 likes opacity. IE8 can do opacity with filter: alpha(opacity=(50));, but that’s hardly ideal. You could use a mixin for this, or (as I’d recommend) just let IE8 be opaque. If readability of your site depends on opacity, you should already be using Modernizr to detect support & deliver a safe fallback. Give IE8 that fallback. IMO, a much bigger issue is IE8’s lack of support for rgba() and hsla() colors. If you’re using those, you should definitely be providing a good fallback. Most of the time, I see fallbacks like this:

.element {
  color: rgb(243, 107, 33);
  color: rgba(243, 107, 33 .5);
}

If you need to keep color values closer than that, what I’d recommend for rgba() fallback is using Sass’s mix() function to blend the foreground (transparent) and background colors. I’ve got a working version of that mixin in this Sassmeister gist. (I’d break it down for you, but I’m ready to wrap this post up. Look for a future post explaining its inner workings, maybe.)

Conclusion #

Sass is great, but not if it’s used to create needless CSS. The next time you read a post about “essential Sass mixins” or want to start using a detailed mixin library, ask yourself, “Does this even need a mixin?” and if it does, “Is this mixin creating good CSS or bloated CSS?”

If you’ve got questions about bloated Sass mixins or unnecessary styles, ask away in the comments. Thanks!