Best Front End Development Tools For CSS

Kyle HenwoodLanguages, Web Development5 Comments

Filewatcher Raygun Blog best front end development tools

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:

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

  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.

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!

Related articles

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

A front end development review of 2016

Next level software intelligence across your entire stack.

5 Comments on “Best Front End Development Tools For CSS”

  1. Arseny

    I use similar setup with grunt-watch on Jade/Pug and SASS compilers, autoprefixer, minifier and browser-sync.

    And I have a question. Is there any big difference between SASS and SCSS ?

    1. Kyle Henwood

      Hi Arseny, thanks for the comment!

      There’s not a lot of difference between SASS and SCSS, its all syntax preference really :).

      Here’s why I chose SCSS:
      The first being that it works with plain CSS (being able to migrate a plain CSS project over to a SCSS one without having to re-write each file is awesome).
      The second reason I chose SCSS over SASS was the syntax, I found bringing team members onboard with SCSS easier than SASS. There’s not much of a learning curve, but it is there.

      Thanks 🙂

  2. Pooja Gupta

    Hi Freyja,

    Thanks for sharing this useful tools, i have just used CSS NANO tool to minify the css and it’s really fantastic.
    I would love to use the remaining ones of my next project. Thanks again

Leave a Reply

Your email address will not be published. Required fields are marked *