Skip to main content

4 tips for a smarter CSS workflow

Jonathan Snook explains how to create responsive web apps with container queries (opens in new tab) at Generate Sydney (opens in new tab) on 5 September. Book now to save 100AUD (opens in new tab) with an early bird ticket!

You've only got to look at the amazing things (opens in new tab) people are making with CSS to know that, as a language, it's changing. People are creating stunning animations (opens in new tab), and amazing images (opens in new tab).

Whether you've been coding for years or just getting started (opens in new tab), 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 (opens in new tab) 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.

Generate Sydney - Jonathan Snook

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 (opens in new tab), 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 (opens in new tab) and analyze-css (opens in new tab) 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 (opens in new tab) and Sass Guidelines (opens in new tab). Tooting my own horn, you should also check out SMACSS (opens in new tab) for ideas on how to write lean modular code for your project.

Jonathan Snook will be talking about responsive web apps with container queries (opens in new tab) at Generate Sydney (opens in new tab) on 5 September. Book now to save 100AUD (opens in new tab) with an early bird ticket!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Jonathan Snook is a designer and developer from Ottawa, Canada. He writes about tips, tricks, and bookmarks on Snook.ca (opens in new tab) and has written the successful, self-published book, Scalable and Modular Architecture for CSS.

Topics