1. Use HSL instead of RGB for colours (e.g. easier to see changes such as lightness differences)

2. Avoid Viewport units (i.e. 100vw, 100vh) because

   • they do not account for scroll bars
   • they do not account for address bars on mobile
   • zooms don't work

3. Avoid position absolute unless necessary (e.g. flex and grid not working)

4. 1 h1 per page (use h2 etc for multiple headings).

5. Try to "let the browser work for you". For example, instead of setting a constant height and media queries, use min-height to prevent overflow (or max-width).

6. You can use --clr-neutral-hsl-300: 241, 100%, 89% then hsl(var(--clr-neutral-hsl-200), 0.7).

7. Short forms

   • fs = font size
   • fw = font weight

Sources:

1. https://www.youtube.com/watch?v=EJtmfkKulNA
2. https://www.youtube.com/watch?v=veEqYQlfNx8
3. https://www.youtube.com/watch?v=fF_NVrd1s14
4. https://www.youtube.com/watch?v=A6IpZ2GlMM4
5. https://www.youtube.com/watch?v=x4u1yp3Msao

Tricks

1. Making the body height 100%.

html, 
body {
    height: 100%; /* just body may not be enough */
}