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 forma...
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… basically, 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 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 up a lot of your time.
If only there was 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 – Tool for sorting CSS properties in a specific order
Usually to re-order CSS code you move lines over each other taking comments into consideration, multilines records of property values, hacks and everything that could be found in the real file. CSScomb reproduces those actions for you. It is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order.
CSS CombCSS Comb Online
csscss -A CSS Redundancy Analyze
csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.
csscssGitHub
Helium CSS – JS Tool To Scan Your Site and Show Unused CSS
Helium 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.
Helium CSS
CSSO – Structural Optimization of CSS Files
As well as being a CSS minimizer, CSSO also can 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
CSSOGitHub
CSS Beautifier – Beautifies Your CSS Automatically
CSS Beautifier is a handy tool that will take any messy CSS file and make it easy to read. Here is what it will do for you:
CSS Beautifier will take the following CSS…
menu{color:red} navigation{background-color:#333}
…and will produce:
menu {
color: red
}
navigation {
background-color: #333
}
CSS BeautifierGitHub
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.
CSS LintGitHub
Minify and GZip Compress JavaScript & CSS
Minify and GZip Compress JavaScript & CSS
Devilo.us – Compress and Tidy Up
