COOL CSS TRICKS ➕
An ongoing list of the best CSS tricks I know.
- •box-sizing: border-boxEver 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.
- •::before and ::afterPseudo 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.
- •Pseudo selectorsThings like first-child, nth-child(n), :not(xyz) are very powerful pseudo selectors. Some are experimental so use with caution.
- •3D transformsRelatively 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.
- •PreprocessorsNot 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