How We'Ve Implemented Sass Linting To Give Our Stylesheets A Much Needed Spring Clean.
Why We Need To Lint - Telling The Story With A Single Voice
In the past, we haven’t used lint tools regularly instead we would just run a check every now and then or when we were due to deploy significant changes to our products.
Our team has grown significantly in the last few months and we now have three team members who contribute regularly to HTML/CSS markup on our projects. Before it was only one person who was doing this. It’s really important that our code appears to be written by a single person to ensure code quality as well as legibility. It’s similar to when we are writing a joint blog post or a case study, we don’t want the post to sound like it has multiple voices telling the story. Linting allows us to comb through our code and make sure that only one voice is telling the story.
Having a lot of different contributors to stylesheets can create messy code and scary errors. The errors may only be small at first but as your projects get older and the code base gets bigger these small errors can become big problems. Linting allows us to check through our code for these small errors and get them fixed straight away, before they get the opportunity to grow into bigger problems.
"You need a dependable mistake-preventing machine that understands CSS and understands you: your intentions, preferences, ideals, and weaknesses."
- David Clark, Lint your CSS with Stylelint
We are constantly learning and improving our ability to write good code. You may go back to an old project to make a change/bugfix and notice that your code writing technique has improved dramatically as well as your problem solving technique. It’s more than likely that you now have better solutions for particular scenarios. You may even be tempted to refactor some of your old code if you find you have free time… In these circumstances it’s really important that we incrementally lint our old stylesheets when we make a change, this helps to keep old code bases tidy and also make sure that they align with new code bases we might be working on.
There are many more reasons why you might decide that you need to build some kind of stylesheet linting into your workflow, these are just the ones that are most important to us.
Finding The Right Tool For The Job
We primarily wanted our linting tool to help us create correctly formatted stylesheets. We like our code to be readable and our developers to have good habits. We use Sass on the majority of our projects so it was important that we used a linting tool that can be used on sass files.
Stylelint is one of the most comprehensive linting libraries available with over 100 configurable rules to help you catch errors, enforce best practices and implement code style conventions. The best part is that it can be used with Sass files.
We didn’t want to have to run extra commands during development and we want all our developers to be using the same Stylelint configuration file. After some research we decided the best way to implement stylesheet linting into our development workflow would be to use a git pre-commit hook on each of our projects.
"Lint-staged is a Node.js script that allows you to run arbitrary scripts against currently staged files."
- Andrey Okonetchnikov, Make Linting Great Again!
There is a really good npm package which allows you to lint your files before committing changes. However, it runs against all of the files in the project so can take several seconds to complete. It also shows stylesheet errors across the whole project, rather than just the files that you have changed.
“Lint-staged” is an excellent script which solves the problems mentioned above. It only runs the linter against the files that you’ve changed which means the script runs quickly and only shows you errors on the files that you have worked on. Setup is simple, you can find a readme on the GitHub project here.
A Linted Stylesheet Is A Better Stylesheet
We have been running Stylelint with Lint-staged on our projects now for about 2 months and it’s working really well. We have had to tweak rules here and there, and our configuration file is by no means perfect but it’s a working progress. Most importantly our stylesheets are gradually becoming a lot more tidy and our code is a lot more uniform 🙌 💅