You have created an awesome website. Over time, you add more pages, content and tweaks to the site. As your website gets larger, so can your CSS. You may add new styles for displaying a landing page, carousel or videos. Eventually, you have unused styles that no one remembers what it was used for. This unused CSS can start to slow your site down.
Cleaning up your CSS from design changes and other additions can be a hard, time-consuming and tedious task. How do you clean up your website without breaking the site?
Steps to clean up your CSS
- Find and fix errors
- Identify unused CSS
- Validate with W3C Validator
- Test your website with the updated CSS
Find and fix errors
Errors can creep in your CSS. You may forget a semicolon, copy code from CodePen or Stack Overflow that solves a problem or another team member added custom CSS to solve a problem.
CSS Lint
CSS Lint analyzes your CSS and tells you what you are doing wrong. You can use it to help clean up your CSS and learn how to write it better.
Identify unused CSS
As you develop your website, your CSS file can grow. It may contain CSS styles that are no longer used or styles that were abandoned. With a large website, it can be hard to tell which styles are still in use.
Use UnCSS to remove unused CSS
UnCSS is a Node.js powered tool that removes unused CSS from your stylesheets. It created a new CSS file with only the styles that are being used. Want on online options? UnCSS Online lets you test the tool for smaller CSS codebase.
Validate with W3C Validator
When you have fix your errors and removed unused CSS, use the W3C (World Wide Web Consortium) validator to check your website. It checks to ensure the technical quality of your website. You want to make sure that you didn’t introduce new errors into your cleaned up CSS.
Test your website with the updated CSS
Since CSS is not easily testable, you want to make small changes and test each change. You want to make sure that the styles you removed or updated don’t break your design.
Cleaning up your CSS code is difficult, time-consuming and tedious. These tools can help to make the task easier.
What CSS tools have you used to make the process easier?