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.
No prerequisites are required to use these tips. No package is also required.
Debug images without alt attribute with CSS.
[alt] must be present on all images, although it can remain empty (for purely decorative images).
Be sure to explicit relation between an input and its label. Use id and for attributes to do so.
<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.
So check if our titles is out of order.
NOTE : Let's use the new
:is pseudo class !
This selector hunts for
<div> inside of inline elements like a
<span> or a
You can see the usage of
:is selector to lint html and keep semantic.
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.
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 can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.
rel="noreferrer" to your target="_blank" links avoids these issues.
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.
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 🍻 🍻 🍻