loading...
Cover image for 🚀 7 amazing CSS tips and tricks for linting your HTML 🔥

🚀 7 amazing CSS tips and tricks for linting your HTML 🔥

viclafouch profile image Victor de la Fouchardière ・3 min read

Hello guys !

Last week we learned How to scope our CSS/SCSS in React JS.

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 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

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

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

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

5. Lang in the html document

html tag accepts lang attribute that is, according to MDN, 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

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

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

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.

Most of these tips can be found on the #lintHTMLwithCSS on Twitter

Cheers 🍻 🍻 🍻

Discussion

pic
Editor guide
Collapse
lorenzodelijser profile image
Lorenzo

I collected all the CSS from #lintHTMLwithCSS on Twitter in one CSS file for people that would like to check it out.

github.com/lorenzodelijser/lintHTM...

Collapse
lorenzodelijser profile image
Lorenzo

A list of amazing repos in this topic that are worth checking out:

a11y.css by ffoodd
debug-css by nternetinspired
debugCSS by imbrianj
REVENGE.CSS by Heydon

Collapse
geoffreycrofte profile image
Geoffrey Crofte 🔥

Raaaah. There are not that many people contributing to the hashtag. You should give them a bit more of visibility.
I don't understand this trend of forgetting the people behind things :/

Thanks for sharing anyways 👍

Collapse
jeffjadulco profile image
Jeff Jadulco

Do I exclude the css files on production? Is it counter-intuitive to even exclude the files? Because generally one would qa their site before pushing to prod and that's the purpose of this css linting.