Chatbox
    You don't have permission to chat.
    Load More
Sign in to follow this  
Followers 0
TehJackal

4 tips for a smarter CSS workflow

1 post in this topic

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

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

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.

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, 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 will be talking about responsive web apps with container queries at Generate Sydney on 5 September. Book now to save 100AUD with an early bird ticket!

CreativeBloq?d=yIl2AUoC8zA CreativeBloq?d=qj6IDK7rITs CreativeBloq?i=h6fy2F1ccP0:z3-VWm9vwCc:g
h6fy2F1ccP0

View the full article

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0