If you are an uber-experienced web designer, you probably won’t have this problem. Your CSS files will be structured coherently and concisely; every selector will have been attentively placed, every property will be perfectly formatted… your CSS will look like carefully crafted art. If this describes you, then move along please, this post is not for you.
But if you are one of the 99.9% of web designers out there that work with CSS on a regular basis, it is for you.
You know how it goes, you start a new web project with a barebones CSS file, and as you build the site, your CSS grows rapidly with it. And it will keep on growing. It will become disorganized. The structure and at times it will be confusing and even unreadable. Structure will ultimately be lost. Mistakes will have been made. Rest assured though; it happens to everybody.
At this point you can either do one of two things, stop at different stages and re-structure the CSS, or you can wait until the site is finished and then fix everything. Either way and depending on the size of the site, it will take a lot of your time.
If only there were a bunch of tools that would help format, organize and sort my CSS for me. Thankfully, there is. Now, these tools are not fool-proof. They won’t know about the unique and quirky style you use for writing your CSS, but they will help and will save you a lot of time. Time back that will let you go and mess up another CSS file!
CSS Comb – CSS Sorting
CSScomb is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, sort them in a specific order.
Unused CSS is a simple tool that scans your website for any unused CSS selectors.
Purgecss is a tool that can quickly remove unused CSS from your site.
sanitize.css is a CSS library that corrects broken and missing styles.
Mort is a simple tool for detecting and highlighting “dead” CSS.
CSS Shrink is a small tool for ‘shrinking’ CSS files.
csscss -A CSS Redundancy Analyze
Helium CSS – JS Tool To Scan Your Site and Show Unused CSS
Helium CSS is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages.
It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.
CSSO – Structural Optimization of CSS Files
As well as being a CSS minimizer, CSSO can also perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers.
It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties
CSS Lint- Helps Find Issues With Your CSS Code
CSS Lint is a tool that helps point out problems within your CSS code.
It does basic syntax checking as well as applying a set of rules to the code that looks for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
extractCSS is a tool that can extract ids & classes from HTML documents and output a CSS stylesheet.
Alternative Optimizers, Formatters & Validators:
- PrimerCSS – Undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet
- Compressor – CSS Compression Tool
- The W3C CSS Validation Service
- CSS Validator from CSS Portal
- 50 Free Web-Based Tools & Apps for Working With CSS
- Our 50 Favorite Web-Based Tools for Web Designers
- Avoiding ‘Wasteful’ CSS in Your Projects
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020
- 25 Free CSS Animation Tools & Frameworks
- Styleguide Toolbox – Templates, UI Kits, Tools & Generators
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019