COOL CSS TRICKS ➕

An ongoing list of the best CSS tricks I know.
  1. box-sizing: border-box
    Ever had to set a horizontal padding on an existing element ? The width increases by the amount of padding. Border box fixes that. It's how css was supposed to be. I suggest starting all projects with this.
  2. ::before and ::after
    Pseudo elements are a very powerful aspect of CSS. It's gives control over, effectively, 3 dom elements for the price of 1. Use it wisely. Useful for fancy effects and preventing unnecessary dom elements.
  3. Pseudo selectors
    Things like first-child, nth-child(n), :not(xyz) are very powerful pseudo selectors. Some are experimental so use with caution.
  4. 3D transforms
    Relatively new but really useful for a dynamic website. CSS transforms are a great way to alter the scale, rotation and relative positioning of things in 3D space. Use these over changing, say, the left attribute to move something. Why you ask? Hardware acceleration. Also, don't overdo it.
  5. Preprocessors
    Not a CSS trick, but it is the best thing you can do to improve your CSS speed and quality. Plus, it's so pretty :D