🚀 7 amazing CSS tips and tricks for linting your HTML 🔥
Tags: css, html, beginners, showdev
Published: 2020-07-08 14:45:38

Hello guys !

Last week we learned [How to scope our CSS/SCSS in React JS](https://dev.to/viclafouch/how-to-scope-your-css-scss-in-react-js-271a).

Today, let's discover 7 tips for linting our CSS.

CSS, for cascading stylesheet, is a language that will allow you to define the form to give to your document. In javascript, you probably use [eslint](https://eslint.org) to check your code for errors of any kind. But in css, how can we debug our style and see the possible mistakes ?

No prerequisites are required to use these tips. No package is also required.

## Let's lint our CSS

### 1. Check `[alt]` attribute for img

Debug images without alt attribute with CSS. `[alt]` must be present on all images, although it can remain empty (for purely decorative images).

![CSS alt for images](https://dev-to-uploads.s3.amazonaws.com/i/t0mj1a7hd978735amo9d.png)

### 2. Relation between inputs and labels

Be sure to explicit relation between an input and its label. Use id and for attributes to do so.

![Input and Labels attributes](https://dev-to-uploads.s3.amazonaws.com/i/lscdyz1jk44ge0ec3u9t.png)

### 3. Check the order of titles

The HTML `<h1>` - `<h6>` elements represent six levels of section headings. `<h1>` is the highest section level and `<h6>` is the lowest.

You should avoid skipping heading levels.

* `h2` above `h1` 🔴
* `h3` above `h4` 🟢
* `h6` above `h5` 🔴
* `h6` above `h2` 🔴

So check if our titles is out of order.

**NOTE : Let's use the new `:is` pseudo class !**

![CSS order headers](https://dev-to-uploads.s3.amazonaws.com/i/nj2trg4sqklndmphn0p8.png)

### 4. No `div` inside inline elements

This selector hunts for `<div>` inside of inline elements like a `<span>` or a `<label>`. 

You can see the usage of `:is` selector to lint html and keep semantic.

![CSS div inside inline](https://dev-to-uploads.s3.amazonaws.com/i/7m3r7n9x1tqo1yejvctm.png)

### 5. Lang in the html document

`html` tag accepts lang attribute that is, [according to MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html), very important for accessibility and accessible technologies like screen readers.

Why? Screenreaders take into account the language declared to adjust the pronunciation of words. A document without languages would be mispronounced. 

![Lang HTML document](https://dev-to-uploads.s3.amazonaws.com/i/um23nsrafy2dvo3hj2c4.png)

### 6. Prevent malicious issues for anchors

When you link to a page on another site using the `target="_blank"` attribute, you can expose your site to performance and security issues: 

* The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page's performance may suffer.
* The other page can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.

Adding `rel="noopener"` or `rel="noreferrer"` to your target="_blank" links avoids these issues.

![Target blank security](https://dev-to-uploads.s3.amazonaws.com/i/75g1kg0au2icqxkp9tyh.png)

### 7. `picture` element must have a `.webp` source

According to Google, the WebP format reduces the size of images by 19 to 64%. This translates into websites that load faster and consume less bandwidth.

So let’s optimize performances with .webp images.
 
![webp images source](https://dev-to-uploads.s3.amazonaws.com/i/8gatxufhvxgzf1gpveqc.png)

Here, I hope that these little tips will help you write your HTML better!

You can find all the css codes in this following [gist](https://gist.github.com/viclafouch/157c2572d8235f4ebd1305b69b82f964).

Most of these tips can be found on the [#lintHTMLwithCSS on Twitter](https://twitter.com/hashtag/lintHTMLwithCSS)

Cheers 🍻 🍻 🍻 

{% link https://dev.to/viclafouch/how-to-scope-your-css-scss-in-react-js-271a %}

{% link https://dev.to/viclafouch/build-a-complete-modal-component-with-react-hooks-2fk8 %}