Advanced CSS Tools and Resources

This Tools and Resources section of our Advanced CSS Hub covers the powerful tools that are available to help with your modern CSS workflow.

You could write raw stylesheet code in a single CSS file, but where’s the fun in that?! Tools such as Gulp.js allow you to use preprocessors, concatenate files, inline assets, minify code, embed sourcemaps, and live-reload across all browsers in a single automated step.

Another way to ensure code efficiency is with the CSS Optimizer (or CSSO), a minification tool that runs on Node.js and which makes sure our file sizes are as small as they can be.

Coding errors may still occur, but tools such as stylelint can help you spot mistakes or minor deviations from your company’s strict coding policies! Even then, developers are notoriously bad at removing unnecessary or unused styles, so UnCSS takes that responsibility away from them. We cover both of these tools in our article on analyzing the quality of your CSS.

There are also several CSS optimization tools for boosting PWA performance, which help you build a better PWA by focusing on CSS optimization, demonstrating how to remove unused CSS, inline the critical path CSS, and minify the resulting code.

Browsers themselves contain powerful tools for debugging CSS, and we dig into how to work with the CSS debugging tools in Chrome, Safari, Firefox, and Microsoft Edge, covering the styles panel, cascade and inheritance problems, spotting invalid properties and values, and debugging responsive layouts.

Further below, you can see links to other articles on CSS tools, as well as books and courses, such as our video course on getting up and running with Sass in an hour and our book Jump Start Sass.

Further Learning

This Advanced CSS hub also offers comprehensive guides to Modern CSS Best Practice, covering many of the newest advances in CSS, as well as a series of Tutorials for taking your CSS skills to the next level.