Home Developer CSS Linting Tools Review

CSS Linting Tools Review

Author

Date

Category

CSS Linting Tools will assist you and save you precious time in the code review process.  They will also save time as writing a set of well-structure and optimized CSS codes can be tedious!

Let us provide an overview and review the open source CSS Linting Tools available.

1. CSS LINT

CSS LINT is the most common and known CSS linting tool to help point out problems with your CSS code. It is basically written in JavaScript which runs the whole CSS linting process.
It applies a set of Javascript rules against your CSS file code. It’s also completely open sourced (https://github.com/CSSLint/csslint) so it’s community driven which is a great signal for linting tools.

CSS Linting

CSSLint verifies your syntax versus a set of predefined rules to uproot potential inefficiencies and errors. You are given the possibility to select the set of rules you would like to enforce.
Overall, it’s a very flexible tool and complete since it looks for:

Interaction Mode: Direct Input.
More Information: http://csslint.net/

2. CSS Cop

Helps you in improving your code better browser compatible stylesheets. It runs the CSS Lint (CSSlint.net) in the background and it is highly customizable. It is an extension which gets directly integrated with Visual Studio and runs CSS Lint in the IDE.

CSS_Cop_1

To run CSSCop, just right-click on any CSS file, folder or project in the Solution Explorer. This will trigger the rule engine and make a list of warnings or the error List. The characteristic of pluggable options make the user to opt as per the need. This extension is compatible with Visual Studio 2013, 2012 and 2010.

CSS_Cop_2

Interaction Mode: Direct.
More Information: http://visualstudiogallery.msdn.microsoft.com/a921b98e-9430-4be2-bf53-1169e12bdb50

3. ProCSSor

It is a sleek tool to clean and format your CSS. The main aim of this tool is to deal with formatting, indentation and presentation issues. Another great feature is the compression of the code in order to increase its speed and to maintain the code in a readable format.

MaxCDN

This format is defined by you which provides an interesting customization option for your CSS code.

Interaction Mode: Direct Input, file and URL.
More Information: http://tools.maxcdn.com/procssor/

4. Dust-Me Selectors

Dust-Me Selectors is a firefox plugin that primarily provides 3 main functions: scanning an HTML page by getting stylesheet and selector details and making you aware of the CSS that are used and not used in a particular page. Essentially it helps you maintain and clean up your CSS code by crawling an XML or HTML site. It loads and scans each page which is linked to the web site and performs a check between each stylesheet against the document object model and gives you an overall and global picture of the selectors. It also has the ability to scan the pages automatically as you are browsing and pick up content dynamically which the crawler cannot detect.

Dust-Me-Selector

Very configurable interface it is a handy plug-in for Firefox and Opera. It also supports all the levels of stylesheets, scans 5 pages in one second.

Interaction Mode: Direct and URL.
More Information: https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

5. W3C

The W3C CSS Validation Service provides you the feature of validating HTML and CSS by manually entering code, URL, or on your local hard drive. This online tool helps you in extracting out all the CSS and HTML errors and warnings which do not conform to HTML rules and standards. It supports all four levels of CSS, Scalable Vector Graphics (SVG), mobile devices and TV profiles. It provides the errors list as well as various levels of warnings which can be ignored on the user preferences.
It works great against vanilla HTML without any sort of template mechanisms.

W3C

Interaction Mode: Direct input, file and URL.
More Information: http://jigsaw.w3.org/css-validator/

6. Dirty MarkUp

Dirty Markup is a three in one tool which helps you clean, format and validate CSS, HTML and JavaScript file types applying the same set of rules. These rules are, for instance, making sure that every code file has an identical appearance and code style. Every file type has a set of alternatives which will decide how the output comes out once the code is cleaned.
It also serves as a CSS editor, with colour coding the code elements. Unfortunately it doesn’t provide an option to directly upload and save changes to a file.

Dirty_Markup

Interaction Mode: Direct input, file and URL.
More Information: http://www.dirtymarkup.com/

7. CleanCSS

CleanCSS helps your code to be well formatted and performant. Its main focus is code compression by removing unwanted white spaces and thus using minimum file resources and browser memory which improves web page performance and load time. It optimizes colour settings, removes unwanted backslashes and also discards invalid properties.

cleancss

CleanCSS does not support CSS3 and also the compressed code produced is not human readable, these could marked as the 2 disadvantages.

Interaction Mode: Direct input and URL.
More Information: http://www.cleancss.com/

8. StyleNeat

StyleNeat is another open source web service that assists you to have standard and organized CSS- sub-selectors and selectors.

Styleneat

Interaction Mode: Direct input and URL.
More Information: http://www.styleneat.com/

9. CSSTidy

CSSTidy is an open source CSS linting tool available as executable file (available for Windows, Linux and OSX) which runs using command line and as PHP script providing CSS2 support. It provides high compression capability and also has custom templates to format the CSS code using your own coding style.

Interaction Mode: Command Line
More Information: http://csstidy.sourceforge.net/

10. Code Beautifier

Code Beautifier is a simple CSS clean-up tool with a user friendly interface. It provides the feature to place the cleaned up code to an output CSS file.

Interaction Mode: Direct Input, URL
More Information: http://www.codebeautifier.com/

Each of the mentioned above tools have its own advantages and disadvantages, so the choice is left to the user to make the best to meet your requirements.


Edit: We just published an ebook: “The Ultimate Guide to Code Review” based on a survey of 680+ developers. Enjoy!


About Codacy

Codacy is used by thousands of developers to analyze billions of lines of code every day!

Getting started is easy – and free! Just use your  GitHub, Bitbucket or Google account to sign up.

GET STARTED

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Recent posts

Why we implemented Offline days at Codacy

Since the Coronavirus outbreak, like most people, we are facing a unique reality that is challenging us in many ways at the...

Pair programming at Codacy and why we do it

Pair programming, also known as pairing or “dynamic duo” model is not a new concept, and it was pioneered by C/C++ guru...

Enhanced security for C++, Java, and Scala with Clang-Tidy and SpotBugs

As part of our effort to continue expanding our language support, we are excited to announce the support of two new tools...

Improve the efficiency of your remote engineering team

COVID-19 hit the ground running and the world felt the impact. Although tech companies seemed to be ahead of the curve by...

Further Enterprise security analysis for Scala

We’re excited to announce the latest addition to our suite of security analysis: Spotbugs. SpotBugs is a program which...