Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Best Front End Development Tools for CSS

DZone's Guide to

Best Front End Development Tools for CSS

We all have our preferred stacks. Always good to see what other people are using though — check this out for a list of powerful front end CSS tools.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

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

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

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

  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

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
css ,web design

Published at DZone with permission of Freyja Spaven, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}