CSS best practices

css
  • When animating elements in CSS use opacity and transform properties only. This not only improves performance of your animation, but also avoids triggering layout shifts and repaints. https://web.dev/articles/animations-guide
  • Comment any rule that its purpose is not obvious.
  • Use content: none; to hide pseudo elements (::before, ::after) rather than display: none;.
  • Avoid "!important". If you have to use it, add comment to explain why.
  • Avoid negative margins. If you have to use them, add comment to explain why.
  • To target the first x children of an element, use :nth-child(-n + x).
  • To remove hover underline from a::before set a::before's display to inline-block.
  • Do not use css to hide elements and instead use HTML5 attribute "hidden".
  • Use -webkit-overflow-scrolling: touch; to apply momenutum-based scrolling to an element on touch devices. Read more
  • Check browser support before using new css properties.