Whether you've been coding for years or just getting started, the landscape for CSS development has changed dramatically in the last few years too. Now, we have plenty of tools at our disposal that can help us to build lean, performant CSS.
Here Shopify's Jonathan Snook gives four top tips that will help you craft light-weight and fast CSS.
01. Identify unused code
Over time, projects change and your CSS may not have gotten with the times. Unused CSS impacts performance by sending needless code to the browser and making the browser work harder to identify what styles should be applied.
UnCSS will take a list of files and URLs, checks that each CSS rule is found in the HTML, and then spits out a CSS file that only includes the rules that are being used.
UnCSS requires compiled HTML & CSS and therefore may not be as helpful depending on your dev environment.
Jonathan will be talking about responsive web apps with container queries at Generate Sydney; don't miss out!
02. Identify duplicate code
As you build out a site, you'll set your sights on individual chunks of the design. When all is said and done, you may not have realized that many of the styles for the modal dialog were actually very similar to the styles for the drop-downs.
Using csscss, a redundancy checker, will help identify duplicate properties across all of your CSS rules. You can then consolidate your code into a single CSS rule.
03. Identify poor code
You've removed unused and duplicated code. What other improvements can we make to our CSS? Parker and analyze-css are two tools that analyze your stylesheets and provide metrics on the quality of your code.
Both Parker and analyze-css can help unearth parts of your code that you can simplify and refactor. Run these tools on a regular basis to help keep your CSS in check.
04. Write better code
Getting rid of bad code is one thing but writing good code to begin with is even better. Recently, a couple of guidelines have been written to help guide you to better code: CSS Guidelines and Sass Guidelines. Tooting my own horn, you should also check out SMACSS for ideas on how to write lean modular code for your project.
Jonathan Snook is a designer and developer from Ottawa, Canada. He writes about tips, tricks, and bookmarks on Snook.ca and has written the successful, self-published book, Scalable and Modular Architecture for CSS.
