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.) 

(For our top 12 tips on designing for developers check out our post here)

Front End Development Tools I Can’t Live Without:

1. File watchers & 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.

Filewatcher is one if the front end development tools I can't live without

Filewatcher

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  
  • SCSS toolkits are part of the front end development tools I can't live without

    SCSS libraries

    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.

    Never worry about browser Prefixers again with essential front end development tools

    AutoPrefixer

    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 as one of my favorite front end development tools

    Animate.css

    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.

    KSS Styleguide is one of my favorite front end development tools

    KSS

  • You get positive reinforcement by documenting CSS.
  • 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.

    Minification for front end development

    CSS NANO

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

    That’s about it for all I use, did I miss any front end development tools you couldn’t live without?

    Leave a comment below or tweet at me @k_henwood!

    The top 10 front end development tools I can’t live without 

    A front end development review of 2016