371

July 19th, 2021 × #CSS#linting#code quality

Hasty Treat - Stylelint for Linting CSS

Scott and Wes discuss Stylelint, a powerful linting tool for CSS that helps enforce code quality and consistency.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott El Toro Loco.

Announcer

Tolinski.

Scott Tolinski

Welcome to Syntax.

Scott Tolinski

In this Monday, hasty treat. We're gonna be talking about StyleLint, which is a really sick linting system for your CSS, And it's going to allow you to have custom rules so that your CSS, well, it can be as good as possible even if you have a 100 people writing it. My name is Scott Pulinski. I'm a full stack developer from Denver, Colorado. And with me, as always, is Wes Boss.

Wes Bos

Hey.

Wes Bos

I am ready to rock. We're recording this on a Thursday as we're trying to squeak in a couple extra episodes.

Scott Tolinski

Recording on a Thursday,

Wes Bos

and I've

Scott Tolinski

have had a lot of coffee. So I'm, about to have a lot of coffee. I have my, my cold brew here sitting ready to go.

Scott Tolinski

We also have a couple sponsors ready to go. Those sponsors are Sanity and Sentry. Now Sentry is the perfect place to see all of your errors and exceptions happen and keep track of them, catalog them, log them, and even get performance metrics Along with a user misery score. Now Sentry is the perfect tool for this type of thing.

Scott Tolinski

They have been battle tested and Proven it has been around for so long, and we've been using it personally for a very long time here and have been absolutely nothing but endlessly satisfied with, Century, their service and the improvement that keep coming down the line. So if you wanna check out Century, head on over to century.io.

Scott Tolinski

Use the coupon code Tasty treat, all lowercase, all one word, and you'll get 2 months for free when signing up. And trust me, you you wanna just toss this on your site, toss this on your Your API tosses on your front end, whatever. Watch the errors come in because let's face it. We all know that, the code you're writing isn't perfect That's who's this, really.

Scott Tolinski

And catalog can get get going with those errors today at century.i0.

Wes Bos

We are also sponsored by Sanity.

Wes Bos

Sanity's structured content CMS. You've heard me talk about them a 100 times. I'm gonna focus on something different this time, which is you can use Sanity for ecommerce. You can use it for a mobile app. We've talked about using it for websites and apps and stuff like that, but you can also if you're running an ecommerce website, you can use Sanity to do that Because at the end of the day, it's a bunch of APIs where you can push and pull data into Sanity and make a really cool editing experience. So If you go to Sanity dot I o, you can go to their solutions tab and click on ecommerce, and they have, like, a really cool case study That shows how somebody built a pretty wicked ecommerce website using Sanity as a back end. So check it out. Make sure you use Sanity dot I o forward slash syntax when you're building your next little project. That's gonna get you double the free usage tier. Thank You, Sanity, for sponsoring Syntax.

Topic 1 03:14

Wes asks Scott to explain what Stylelint is and why it's needed

Wes Bos

Alright. Let's get into it. We are gonna be talking about StyleLint, And this is not something that I have integrated into a project before. I might have used it just as, like, In some other existing projects, but it definitely is something that has piqued my interest since you've been talking about it. So, what is it? Why do we need it, Scott? Yeah. So StyleLint,

Scott Tolinski

it kinda is exactly like what the name would suggest if you've used any other linting tools. And a linting tool is typically something that lets You know, whatever you're doing is not good or could be better.

Scott Tolinski

And we we often use something called I mean, before it was Was it JSLint and then JSHint, and then now we're on ESLint is the the one that everybody uses for just about everything. And ESLint does a good job of letting us know when our JavaScript isn't up to snuff and we need to adjust it in much more of a way that is not like formatting specifically, but potentially errors or issues.

Scott Tolinski

So style int, really, it kinda fills that same void for CSS.

Scott Tolinski

And it works with all the stuff you know and love like Sass or any of that stuff. I mean, we use it even in line our our, Svelte components CSS, and it works totally fine with no issues. So what is this thing? It's basically a modern, mighty linter for CSS. K? It lets you know if your CSS is following the guidelines or not.

Topic 2 04:41

Scott explains Stylelint is a linter for CSS like ESLint is for JavaScript

Scott Tolinski

So what do you need to get started with Stylent? Well, it's really easy. You install the darn thing, and then you create a style Lint RC file just like an e s Lint RC file. And the docs I mean, the docs are are pretty clear on this, but you can have it be any number of ways. We just do dot style lintrc, The same way you would do, like, an e s lindrc file.

Scott Tolinski

And that that's it's been pretty fine for us.

Scott Tolinski

Duck a little bit for Versus Code to play. Well, to be honest, we had to install an extension for Versus Code. Then Versus Code was complaining. I had to close it and restart it a whole bunch, and eventually, it started playing nice. So it's not exactly the smoothest

Wes Bos

Up and running experience with the Versus Code plug ins, but once you get everything up and running, it's really pretty nice. Oh, I have this installed. Maybe I have been using this. Well, you have to have the RC file or else it doesn't do anything. Oh, really? Okay. No. Yeah. Then then definitely haven't been it's it's It's a tricky thing about Versus Code is that it comes with built in Beautifier for JavaScript and for some of your CSS, And sometimes you gotta turn those off in order to use some other tools.

Scott Tolinski

Yeah. It's, so okay. So by default, this thing exists. Right? For it to do anything, you need an RC file, and you need to give it some presets.

Topic 3 05:53

To use Stylelint you need to install it and create a .stylelintrc config file

Scott Tolinski

And so, like, the basic way of getting going is to say StyleLint or, I mean, in the RC file, it extends StyleLint config standard. Okay? That gives you the standard rules. And likewise, you could use the SAS guidelines as well to get the standard SAS rules as well. And from there, it works largely like ESLint or any other linting system where you can turn rules on or off or config them via this configuration.

Topic 4 06:28

Scott says you'll likely need to customize the default Stylelint rules for your preferences

Scott Tolinski

And let me tell you, you will need to configure your rules because, I found that CSS more than JavaScript required quite a bit of, like, alright. This is how we like it, not like this is somebody else's opinion.

Scott Tolinski

Yeah. But in addition, there's a ton of plug ins for this thing, and I think this might be the biggest strength of this. Besides the fact that it's a good linting system, the plug ins Ecosystem is fantastic. So in the show notes here, I linked to awesome style lint, which is a style lint repo. You know, anytime there's a a repo, there's one of these awesome somethings.

Topic 5 07:00

Scott highlights the Stylelint plugin ecosystem as a major strength

Scott Tolinski

And this one gives you a whole bunch of different extensions. Unless, you might wanna paw through this just to see, like, if there's anything in particular that It fits your fancy because it is very, very cool the kind of stuff you can do here. So I thought I would give maybe a little bit of CSF. To some of the stuff that we use and why,

Wes Bos

if that's cool with you. Yeah. Well, before you get into that, I wanna just wanna be clear or ask you a question. So this will both give you squiggles when you do something bad, but it it will also try and Format and fix your code. Right? Like, if you have weird indentation or or or extra spaces or a curly bracket on the the wrong line, it will actually Fix it for you, kinda like how ESLint does that a little bit, but Prettier does most of that for me. Yeah. And I haven't been able to get this to auto fix on save. So there's I have to run the command palette,

Scott Tolinski

like, auto fix fixable things Oh. Which I think there's gotta be a way to get that going easily enough, but I have not been able to figure it out. So Anybody listening is using style and and doing that, then please tweet us out, and we will retweet you with how to get that set up because the extension doesn't do it itself, Which is a little unfortunate. There was, like, another extension that all it is is a fork of the main one, but does fix it on the safe. But I found that extension to be out out of date.

Wes Bos

I love when people do that. Yeah. And if I love, I mean hate. Right. But Someone's like, alright. I fixed it. Now here's the

Scott Tolinski

fixed version of the the plug in, and you're like, which one do I use? And now what you have is one that's out of date Because they, like, didn't keep their versions up to date, so it's like, I can't use this one anyways.

Scott Tolinski

So that that was my situation with I would be interested to know what other people Managed to get going.

Scott Tolinski

So, some of the cool rules that I've added to this thing is order. And, You can have an order plug in where you can choose in what's the order in which things will be reordered.

Scott Tolinski

And I happen to do mine alphabetically, Which I don't know if everybody's gonna be into, but I do like alphabetical CSS property ordering. And then I have my custom properties at the top.

Topic 6 08:58

Scott shares some of the custom Stylelint rules his team uses

Scott Tolinski

Other things I have in here that are are pretty interesting.

Scott Tolinski

I mean, I would say that's probably the least interesting one I have. But some of the the ones that are actually interesting would be, for instance, Plug in no low performance animations.

Scott Tolinski

So if somebody is trying to animate, let's say, position left Or something that's not a transform three d, perhaps. They're doing a transform even. It's going to complain at them and saying, hey. This is a low performance animation that you're attempting to do and links them to the docs on what what is a low performance animation and what's not. And I think that's the the biggest strength of this thing is The little hover over pop ups, they do give you very very relevant information as to, like, what the way forward is. If if I'm trying to, animate something and it's not working correctly or it's giving me an error. Like, what do I do instead if I'm not gonna animate this or that? Well, here's what you do instead.

Scott Tolinski

I also have some rules for specifically, it's called a scale unlimited declaration strict value.

Scott Tolinski

And what this one is doing is basically saying the following properties that we have in this array should not be given a Value. They should be given only a CSS variable as a value.

Scott Tolinski

Meaning that if somebody is attempting to define a font size, a color, or a z index currently in our CSS. Oh, that's cool. Yeah. It's going to complain and say, hey. Use the CSS properties because we already have these defined somewhere else essentially.

Scott Tolinski

So that way, it keeps people on you know, keeps everybody In the same road in terms of always utilizing the custom CSS variables that allow us to keep our design system Cohesive.

Wes Bos

Yeah. Honestly, that's, like, the the huge benefit to linting for me is that it, like, forces Me into some sort of more rigid system Mhmm. Versus just kinda going willy nilly all over the place. And that's why people like like a lot of these utility frameworks as well because it it does force you into a bit more of a rigid system, And I think the the end product is better. And it forces your team there too. So, I mean, that's what everybody's gonna be using. It enforces, like, a standard where everybody everybody has To fit that same standard.

Scott Tolinski

Some other ones that we have is, like, a max nesting depth for SaaS where you can only nest, 3 layers deep or else it complains.

Scott Tolinski

So I I feel like 3 is a good number for that. I think the default is, like, 1, which I'm we had to turn it off immediately because I was just like, yeah. I'm not gonna undo 1. I'm gonna do At least 3 layers nesting here. You can even set, like, a regex pattern for your variable names, which we have done.

Scott Tolinski

That way, the variable names stay consistent.

Wes Bos

I'm just looking at this, and I see that you can write your own rules.

Topic 7 11:54

Wes suggests writing a custom rule to enforce gray vs grey spelling consistency

Wes Bos

And the one I immediately want is I always use gray and gray, g r e y and g r a y Yeah. Interchangeably.

Wes Bos

One of them is the queen's gray. It's the correct way. Yeah. And then the one way is American way. I think I think with an a as the American way. Yeah. That makes sense. It is. Yeah. What I end up doing is just setting double variables for each one, but what I would like it to do is to if I use the wrong version

Scott Tolinski

is for it to yell at me and say, hey. You've used the wrong version of gray here. There's there's a a ton of potentials for this. And if you just look through this awesome style, I think you'll be shocked at just how many cool things there are in here, especially, like, no indistinguishable colors. If 2 color values are Too close to each other, it complains about them being suspiciously too close.

Scott Tolinski

Suspiciously close. No browser hacks. That's a good one too. No browser hacks. There's one for logical properties.

Scott Tolinski

One thing that's it's funny because it's it's complained that if my, property declaration doesn't have a line above it, which is, like, something I do apparently a lot, which is like, oh, that that just makes it a little bit more readable and and keeps everything in line here.

Scott Tolinski

There's a Ally plug in for accessibility stuff.

Scott Tolinski

No unsupported browser features.

Scott Tolinski

Selector BEM pattern if you want to enforce BEM patterns as well. Yeah. The it's just endless the amount of stuff here, and I'm kinda seeing more and more every single time I look at this thing of just different things I wanna try out. It has been a little bit annoying, but once you get it configured and everything like that, you know, as any linter is, you get in the sweet spot of where it's, you know, informing you of the annoying stuff And getting out of the way for the everyday stuff. That's cool. There's a unit disallow. So if you wanna stop somebody from using a specific unit, Like, one example would be instead of using degrees to rotate something, you could only enforce using turn values. You ever heard of turn? Yeah. I do. I just it's it I it's so funny. I was right about to say turn. Out of all the CSS properties that you could have even brought up, I was about to say turn on my own accord Because we just used turn in the latest level of tutorial course just for fun. We were rotating something, and I was like, you know what? We always do degrees. Let's just do a you know, we're gonna use a 0.25 turn to turn this a quarter away. Hey. That actually makes a lot of sense Rather than having to be like, oh, the 90 degree turn. Okay. Sure. But or it's a point. It's a quarter turn, which, honestly, I kinda dig. I I I mean, if there's no performance implications of that or whatever, I kinda dig turn because it's just a Yeah. You know, a quarter value.

Topic 8 14:31

Wes and Scott discuss the benefits of using turns over degrees for rotations

Wes Bos

Especially if you have, like, You wanna show something that's, like, 82% turned because you're, like, 82 per like, you're doing a progress meter or something like that. Oh, yeah. Then it's So easy to convert a decimal percentage to a turn because they're The same thing. All a 100 based. Yeah. Yeah. Exactly. Instead of having to, like, multiply by 360 Turns? Yeah. I think we need to start talking about turns more because not enough people use them. This is so funny because I just recorded a video, like,

Scott Tolinski

3 days ago, and it was like, hey. Let's use just turns for the sake of it. It's you know, we're using it right now. Let's just go ahead and do it. Oh, that's great. This is this is really cool. I I really like that there are so many possible options on here, and then you can also write

Wes Bos

Custom stuff. Because I would imagine that if you have an in house CSS library, not only are the rules about how you should code things, but there probably are also rules in terms of writing your CSS or adding class names because, like, consistently naming Things with a class name, whether you're using dashes or underscore or camel case or something like that, this would Be really good to enforce that type of thing. Yeah. And you could have it be in your,

Scott Tolinski

pipeline for deployment Or PRs to deny a PR if somebody is using an unsupported value or something like that just as a a code cleanliness.

Topic 9 15:56

Scott explains how Stylelint could augment code reviews and help managers enforce standards

Scott Tolinski

We we often because we're not working in Giant teams. We often have that as a blind spot, but, like, I think this would be you know, I've heard from various managers that this is, like, an essential tool in making sure that their code is all Up to snuff without the, you know, that's like a common thing is like code reviews. Right? Imagine Yeah. If you had your code reviews, It could be, you know, augmented by these tools so you're not having to manually go in there and be like, hey. You know, you use this Color value, you should really use this other one instead and have the tool do it for you. I mean, that's just 1 step into, you know, Freeing up some time as a manager or something like that as well. So check it out. StyleLint, it has a big community behind it. It is very well supported.

Scott Tolinski

This isn't a small little project here. This is a big thing with a lot of people using it, so check it out. And I'll have the the link in the show notes and everything like that to the awesome Styled into repo that you can go check out, get some plug ins. There are some tutorials and stuff there as well. Definitely something I highly recommend after using for a little bit here And have largely found it to make our CSS better. Awesome. Well, thank you so much for tuning in, and we will catch you on Wednesday.

Wes Bos

Peace.

Wes Bos

Peace.

Scott Tolinski

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or Drop a review if you like this show.

Share