Web Directions Year round learning for product, design and engineering professionals

For Scroll: Respond, we asked several presenters if they’d like to write an article based on or somehow related to their conference presentation.

We’re going to do the same with Scroll: Code, to be distributed at our Code conference (you’re going, right?), and for the next few weeks, we’re going to post a few of those articles here as Idea of the Week.

First cab off the rank is Fiona Chan, former front end dev and lately Technical Recruiter at Lookahead Search, and one of the organisers of the SydCSS meetup group.

Fiona’s article is on “linting” … but we’ll let her explain.

A Brief History of Lint

Do You Lint?

In my presentation for Code 2016, CSS: Code Smell Sanitation, I talk about how to keep your CSS clean and free of errors. Most of the techniques I talk about are applied when everything looks right and has passed linting.

Now, I’m looking forward to telling you more about that, but it occurred to me that I’ve assumed everyone knows about linting.

Maybe that’s not the case. And it’s important that people who haven’t heard of it before, and therefore haven’t used it, feel comfortable about learning about it.

So I’m going to write a bit here about linting, and specifically CSSLint.

Lint

Broadly, a lint tool performs static analysis of source code and flags patterns that might be errors or otherwise cause problems for the developer. Static analysis is when code is checked without actually being activated, as opposed to dynamic analysis when the software is running.

But linting has a history.

Back in the late 1970s, Stephen C. Johnson first developed Lint as a Unix tool that examined C language source code and pointed out code that might contain errors or be structurally unsound.

It appeared in public in 1979 in Unix v.7, as part of the Portable C Compiler.

The name comes from the textile fibres that accumulate on clothing and other material. If you do laundry, you’ll know lint. There’s also belly button lint – let’s not go there.

To clean lint off a jumper or skirt, you might use a lint brush, a tool designed for that purpose. Jonhson’s Lint utility was like a lint brush for C, picking up code that looked messy or badly structured.

From then on, most computer language compilers had a lint checker of some kind built in.

Nowadays, lint checkers are tools that look for structural or syntactical discrepancies code in any language. For JavaScript there’s JSLint, for Python there’s Pylint and for CSS there’s CSSLint.

CSSLint

CSSLint is an open source CSS code quality tool originally written by Nicholas C. Zakas and Nicole Sullivan, released in 2011.

As the authors say:

CSS Lint points 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. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

The idea is that you choose which rules to apply and which problems to look for.

This shows you both the comprehensiveness and the flexibility of CSSLint. You can see exactly what rules are being checked, and you can choose to implement them or not.

Apart from anything else, it’s incredibly useful to have a checklist of what can and does go wrong in CSS.

It is, of course, really confronting to be told everything that’s wrong with the CSS you wrote. It looked OK last time you went over it, right?

But this is the kind of step you need to take and the kind of check you need to make – to avoid errors, to enhance site manageability and to improve page performance.

It also doesn’t take long before many of these things stick in your head and you already address them as you work.

Controversy

CSSLint is not without its critics. Their criticisms are mostly focused on CSSLint “enforcing” rules that they feel inhibit creativity, or limit ingenuity, or are vague and arbitrary, or encourage bad practice.

In my view, these criticisms are – by and large – not well-founded.

The point of CSSLint is not to enforce any kind of policy or practice, nor is to clean your code for you. It’s designed to point out possible issues you might want to address, according to a set of rules you customise for yourself and your site.

Even if you turn off all the rules, CSSLint is a great basic syntax checker, without having to look at validation issues. Sometimes, you just want – or need – to know that your CSS works.

So, now when you come to my presentation (that’s CSS: Code Smell Sanitation, 3.10pm on Day 1) you’ll know what I’m talking about when I talk about what still needs to be checked after linting – the things even CSSLint might not catch – to keep your code smelling good.