CSS Protips

A collection of tips to help take your CSS skills pro.

For other great lists check out @sindresorhus‘s curated list of awesome lists.

• Use a CSS Reset
• Inherit box-sizing
• Use unset Instead of Resetting All Properties
• Use :not() to Apply/Unapply Borders on Navigation
• Check If Font Is Installed Locally
• Add line-height to body
• Set :focus for Form Elements
• Vertically-Center Anything
• Comma-Separated Lists
• Select Items Using Negative nth-child
• Use SVG for Icons
• Use the “Lobotomized Owl” Selector
• Use max-height for Pure CSS Sliders
• Equal-Width Table Cells
• Get Rid of Margin Hacks With Flexbox
• Use Attribute Selectors with Empty Links
• Style “Default” Links
• Intrinsic Ratio Boxes
• Style Broken Images
• Use rem for Global Sizing; Use em for Local Sizing
• Hide Autoplay Videos That Aren’t Muted
• Use :root for Flexible Type
• Set font-size on Form Elements for a Better Mobile Experience
• Use Pointer Events to Control Mouse Events
• Set display: none on Line Breaks Used as Spacing