CSS files formatting and optimization is no more a headache for web developers with the help of these hand-picked tools!
Since its inception, cascading style sheets (CSS) have been widely used to outline the visuals of web pages. They include the definition of colors, layouts, animation, and fonts. Being independent of HTML, CSS allows you to easily adapt a web page presentation to different types of devices with different screen sizes without having to change a bit of the page’s content.
CSS is called cascading stylesheet because of the way property values are applied to the content hierarchy. Child elements can either inherit or override property values from their parent elements. These capabilities are provided through a model based on a hierarchical scope of effect. The problem with this model is that, if it is not correctly used, it can seriously affect a website’s performance.
And no one likes a sluggish website. That’s why they need for CSS optimization arose, together with a new breed of tools explicitly designed to make CSS files as neat and fast as possible.
CSS optimization can be done in many ways: CSS files can be reduced in size, can be cleaned, can be tested or validated for correctness, can be tidied up, can be formatted to understand its code and, in general, better, can be tuned up to allow for better user experience. We made a selection of the best tools for each one of these tasks.
# CSS Tuning Tools
CSS Minify
CSS Minify is a simple tool to do CSS minifying: the process of taking the beautified, readable, well-formed CSS and removing all of its spacing, indentation, newlines, and comments. The resulting minified CSS can be used successfully without those elements. Also, minifying makes the CSS more difficult to read, discouraging code thieves of stealing your hard-worked stylesheets.
When you minify your code, it is good advice to keep a beautified (non-minified) version of it, because you’ll need to be able to read it in the future, in case you need to make changes to it.
Topcoat
Topcoat is not a tool to optimize your CSS. Instead, it is an open-source CSS library designed with speed in mind. It is a descendant of the Adobe design language developed for Brackets, Edge Reflow.
Topcoat includes PSD and many other design artifacts, together with a collection of simple and clean SVG icons and style guides. It also offers benchmarking tools and the fancy Adobe Source Sans Pro font family.
Code Beautifier
Code Beautifier is based on CSS Tidy, the popular open-source CSS parser and optimizer. It lets you paste the CSS code to process on a text area, or get it from a URL. After doing its job, it shows the optimized code, together with a list of the changes made. You can copy the modified code to the clipboard or save it to a file for later use.
The tool offers a significant and comprehensive list of options that lets you adjust its results to meet your preferences. For example, it provides five options for compression, ranging from low compression to the highest compression. Other options let you specify sorting, other forms of compression, removal of unnecessary items, between others.
CSS Nano
Another CSS minifier tool is CSS Nano. This one is based on a tool created to transform styles with JavaScript, called PostCSS. Thanks to the plugin architecture of this tool, the creators of CSS Nano were able to build it out of small modules with restricted functions.
By default, CSS Nano will take the CSS file you give it to process and do only safe optimizations on it. But the tool also offers options to push compression to the limits. The workings of the CSS will still be the same, but its unnecessary whitespace will be removed. Also, its identifiers will get compressed, and its unnecessary definitions will be completely purged.
# CSS Cleaning Tools
Dirty Markup
Dirty Markup does precisely the opposite of the minifiers: it takes whatever code you feed it and cleans it, making it easy to read –as long as it is valid CSS code. The resulting code is perfectly beautified.
The creators of Dirty Markup say that nearly a billion lines of code (considering not only CSS but also HTML and JavaScript) have been beautified using their tool.
Dust-Me Selectors
Dust-Me Selectors was created to scan a website and find unused CSS selectors in order to remove them and reduce the size of your code. It works as an add-on for Firefox and Opera.
Dust-Me Selectors can work on an individual page or crawl an entire sitemap, showing you the details of all the stylesheets and selectors found, organizing them in used and unused. The Firefox version is capable of scanning pages automatically as you browse. You should only take into account that, when doing this, mutation events can trigger additional scans if the page changes.
CSS Lint
CSS Lint offers a minimalistic interface: just a big textbox in which you paste your CSS code to have it “linted”. It does not tell what the linting process will do to your code, but a warning message on the top of the page tells you that the results will hurt your feelings –and also help you code better.
CSS Lint validates the syntax of your code against a set of predefined rules. By doing this, it detects potential inefficiencies and errors. With a little customizing, CSS Lint gives you the possibility to select the set of rules you want to enforce.
# CSS Testing/Validation Tools
CSS Stress Test
CSS Stress Test works as a bookmarklet (a small piece of JavaScript code) that applies stress testing to the CSS of any given webpage. The tool indexes all the elements in the CSS code and their classes. Then it begins the stress test by removing the classes one by one and timing how long it takes to scroll the page.
If the time the page takes to scroll reduces considerably when removing a selector, then that selector represents a problematic area that should be removed or corrected. This tool works especially with fancy CSS3 code that allows for rounded corners, opacity, text shadows, and box shadows. All these effects can be done in CSS3 without using image slicing, special scripting, or adding additional elements.
But CSS3 could cause problems: a single property could result in visible redraws and page-scrolling issues. That’s where the CSS Stress Test can come in handy.
CSS Validation Service
CSS Validation Service validates cascading stylesheets and (X)HTML with stylesheets. The tool checks for properties defined in all the versions of CSS. To validate a page or a CSS file, you just need to enter its URI (uniform resource identifier) and set some basic options, like profile (kind of CSS to check), target device, warnings to show and what to do with vendor extensions-related issues (show errors or warnings).
Once you’re all set, you hit the Check button and wait for the results. The final report will show you a comprehensive list of errors and warnings, where you’ll find invalid properties, syntax errors, unknown vendor extensions, between many other issues you should correct in your CSS in order to tune it up. The report will also show you all valid CSS code in your page.
BackstopJS 3
BackstopJS 3 automates visual regression testing of responsive web user interfaces. It does its job by comparing a series of DOM screenshots. It offers an exciting list of features: there’s in-browser reporting, also layout setting for print and screen, and some other specific features, like display filtering and reference/test/visual diff inspector.
Using Puppeteer and ChromyJS scripts, BackstopJS 3 can simulate user interactions, and it is able to render tests with Chrome Headless. In order to eliminate cross-platform rendering problems, it also has integrated docker rendering. The tool can run globally or locally as a standalone package, and it plays nice with CI and source control. BackstopJS 3 is very easy to use: with just three commands, you could go quite a long way.
Conclusion
I hope the above CSS tools helps you to optimize your web application’s CSS files for better performance. If you are interested in learning advanced CSS, then check out this brilliant course.