Best Front End Development Tools for CSS

Keeping up with any development toolkit is a constant task, especially front end development tools.

Take your eyes off the constant stream of methods and technologies for a moment and you’re bound to miss something! Just last week I was having a catch up with a friend of mine who’s also a front-end developer. He was pretty excited to talk about some of the great new tools he had been using. The biggest one was using Grunt to compile SCSS.

It’s easy to forget not everyone is on the same journey as you. Either they are limited as to what they are allowed to use, or have tunnel vision and don’t look at their surroundings. I had been using Grunt for as long as I’d used SCSS. Hearing him talk about having to trigger the compilation manually via command line was painful to say the least. So, I thought I’d share some of the front end development tools I use regularly. (Particularly for CSS.) 

Front End Development Tools I Can’t Live Without

1. File Watchers and Compilation

First off, if you’re still compiling SASS via the command line, definitely look at automating the process, there are many tools that can do this for you, I use Grunt-Watch, however there are many others like Gulp-Watch.

Some IDE’s come with built in pre-processors. Take a look and see what works for you!

2. SCSS Libraries

Libraries are large toolkits that contain mixins and include all manner of things from CSS resets and cross-browser background gradients to handy math calculations for font sizing using the golden ratio.

Popular libraries:

• Bourbon 
• Compass 
• PostCSS  

I’ve used Compass for a couple of years, it’s an amazing toolset.

However I found it was able to do far more than I actually required. Taking with me the knowledge of what I wanted from Compass, I created a lightweight custom stack of plugins which reduced my scss compile time from 4 seconds to practically instant.

3. Autoprefixer

Never have to worry about browser prefixes again, ever.

Autoprefixer automatically adds the required prefixes based off https://caniuse.com. This is single handedly the biggest timesaver I have used, highly recommend.

4. Animate.css

I love writing my own CSS animations as much as the next person, but sometimes you just don’t have the time.

Animate.css lets me quickly add and test animations without having to think through the logistics of creating them myself.

5. KSS styleguide

KSS allows you to create a documented styleguide straight from your CSS, this has many advantages.

Paring KSS with a modular CSS structure such as BEM allows you to reliably create a reusable set of styles that are visible, and you’ll reap the rewards from great documentation.

1. You get positive reinforcement by documenting CSS.
2. Because of the documentation and visual styleguide, components are far easier to find and reuse – no more guessing if a similar component has been built already!

6. CSS minification with CSS NANO

Automagic minification of my generated CSS file.

CSSNANO also removes all unnecessary/outdated browser prefixes if there are any, as well as duplicate classes.