Hendra Nicholas I am a software engineer, consultant and CEO at 41studio currently living in West Java, Indonesia. My interests range from programming to sport. I am also interested in entrepreneurship, technology, and design.

Best 7 CSS and JavaScript Tools for Code Optimization

3 min read

In this Article we will check out 7 powerful tools you can use to optimize your CSS and JavaScript files in order to improve the quality of your code.

1. CSSLint

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency.

CSSLint admittedly intends to “hurt your feelings”, but in exchange it “makes you code much better”. CSSLint currently leads the market of CSS linting. It’s written in JavaScript, it’s open-source, and comes with tons of configurable options.

CSSLint allows you to choose what kind of errors and warnings (compatibility, performance, duplication, etc.) you want to test for, and validates your CSS syntax against the rules you opt for.

2. SublimeLinter CSSLint

CSSLint is such an effective CSS linter that it’s hard to find a competitor that measures up to it. Probably that’s the reason why the SublimeLinter linting framework built its CSS linting plugin on top of it. SublimeLinter is a SublimeText plugin that provides users with a means to lint their code (CSS, PHP, Python, Java, Ruby, etc.) right inside the SublimeText editor.

Before you install the SublimeLinter CSSLint plugin itself, you need to install CSSLint as a Node.js module. The great thing about this handy tool is that you only have to configure the settings once, or if you’re happy with the defaults you don’t even have to do that, then you can always get the relevant warnings and notifications inside your SublimeText editor without any further hassle.

3. StyleLint

StyleLint helps developers avoid errors in CSS, SCSS, or any other syntaxes that PostCSS can parse. StyleLint tests for over a hundred rules, and you can choose which ones you want to switch on (see an example config).

If you don’t want to build your own configuration, you can also opt for a pre-written, standard config that contains about 60 StyleLint rules. StyleLint is a quite flexible tool, it can be extended by extra plugins, and used in 3 different forms: as a command line tool, as a Node.js module, or as a PostCSS plugin.

4. W3C CSS Validator

Although W3C’s CSS Validator is usually not thought of as a linting tool, it gives developers a great opportunity to check their CSS source code against W3C’s official standards. W3C built its validators with the intent to provide a tool that’s similar to the Lint program checker for the C language.

At first, they created the HTML markup validator that was later followed by the CSS validator. W3C’s CSS validator doesn’t have as many options as CSSLint, but it returns detailed, easy-to-understand error messages and notifications.

As an extra feature, you can also check your code against W3C’s recent mobile web standards, which is not a bad thing in the era of the mobile web.

5. Dirty Markup

Dirty Markup cleans, formats, and validates your HTML, CSS, and JavaScript code. It can be a great choice if you like straightforward design and want a quick solution. Dirty Markup throws error messages and notifications in real time while you write or modify your code inside the editor.

When you hit the “Clean” button, it fixes syntax errors at once, tidies up the format, but leaves the warnings intact letting you solve them however you want. You can’t choose which rules you want to test for, but all three file types have a few settings that enable you to decide the format of the cleaned output.

6. JSLint

JSLint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules. It is provided primarily as a web application through jslint.com, but there are also command-line adaptations. JSLint was first released in 2002 by Douglas Crockford, and haven’t lost momentum since then, so you can safely assume that it’s a stabile and reliable JavaScript linting tool.

JSLint can process JavaScript source code and JSON text, and it comes with a ready-made configuration that follows the JS best practices Crockford wrote about in his book entitled JavaScript: The Good Parts.

JSLint has a few options you can choose from, but you can’t add your own custom rules, or disable most of the features.

7. JSHint

JSHint is a program that flags suspicious usage in programs written in JavaScript. The core project consists of a library itself as well as a CLI program distributed as a Node module.

JSHint is a highly popular fork of JSLint, and it’s used by major tech companies like Facebook, Twitter, and Medium

JSHint is a community-driven project that started out with the endeavour to create a more configurable and less opinionated version of JSLint. JSHint allows developers to configure any of its linting options, and place the customized configuration into a separate file, an option that makes the tool easily reusable, and a good fit for bigger projects.

You not only can use JSHint to lint vanilla JavaScript, it also has out-of-the-box support for many popular JS libraries, such as jQuery, Mootools, Mocha, and Node.js.

Hendra Nicholas I am a software engineer, consultant and CEO at 41studio currently living in West Java, Indonesia. My interests range from programming to sport. I am also interested in entrepreneurship, technology, and design.