2 Apr 2017, 19:20
by repraze

Looking back a few months ago, I was happily writing my own sets of Mixins to make my CSS cross-browser. I encourage you to read about them. Every time I encountered a weird property, I created a Mixin. I could have used one of the many available collections out there, but I kept my own little file.

Little did I know the mess to come.

The Let Down

Using the latest CSS features was good, and seeing my code build nicely was gratifying enough, but as time went by and some of the properties became standard to all browsers, my files became messier.

Mixins are great, with a simple binding in your style, it expands into a set of predefined properties. This is especially useful when you want to make your style browser compatible. One declaration and you're done. When a browser integrates the property, you can reduce the Mixin and continue. Relying on a library is probably the best so you don't have to keep track. Although what do you do when you simply don't need a Mixin any more?

This is the main issue, writing those Mixins in your sources means that you depend on them. The result are ghost functionalities that bind to now available properties. The build is universally slower and it's all just a big mess. The only solution is to remove all the bindings to those Mixins and you've lost what made them useful in the first place.

Autoprefixer - The Way Forward

Autoprefixer takes another route to solve the problem. It will grab your CSS and parse it to add vendor prefixes. The solution is always kept up to date and you can target a set of browsers.

With Autoprefixer, your CSS becomes somewhat similar to TypeScript. A higher language that will be parsed to be browser compatible. The good thing about this method is that you don't compromise your language in the first place. As things move forward you can simply update and rebuild, no hassle.

What About Mixins Then?

There's a better way to deal with your browser issues now, but it doesn't mean that Mixins are obsolete! They are still very useful to generate tedious code in just a couple of lines. You can have recursions and iterate through arrays to create rich and powerful style-sheets. I've created my own column grid system with combinations and you can imagine how it would take forever to write something similar with just CSS. All those n column implementation out there.

Latest Posts

Adds Here