CSS Protips

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

[!TIP] For other great lists check out @sindresorhus's curated list of awesome lists.

Contents

• Protips
• Support
• Translations
• Contribution Guidelines

Protips

1. Use a CSS Reset
2. Inherit box-sizing
3. Use unset Instead of Resetting All Properties
4. Use :not() to Apply/Unapply Borders on Navigation
5. Check if Font Is Installed Locally
6. Add line-height to body
7. Set :focus for Form Elements
8. Vertically-Center Anything
9. Use aspect-ratio Instead of Height/Width
10. Comma-Separated Lists
11. Select Items Using Negative nth-child
12. Use SVG for Icons
13. Use the "Lobotomized Owl" Selector
14. Use max-height for Pure CSS Sliders
15. Equal-Width Table Cells
16. Get Rid of Margin Hacks With Flexbox
17. Use Attribute Selectors with Empty Links
18. Control Specificity Better With :is()
19. Style "Default" Links
20. Intrinsic Ratio Boxes
21. Style Broken Images
22. Use rem for Global Sizing; Use em for Local Sizing
23. Hide Autoplay Videos That Aren't Muted
24. Use :root for Flexible Type
25. Set font-size on Form Elements for a Better Mobile Experience
26. Use Pointer Events to Control Mouse Events
27. Set display: none on Line Breaks Used as Spacing
28. Use :empty to Hide Empty HTML Elements
29. Use margin-inline instead of margin

Use a CSS Reset

CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, or you can use a more simplified reset approach:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Now elements will be stripped of margins and padding, and box-sizing lets you manage layouts with the CSS box model.

Demo

[!TIP] If you follow the Inherit box-sizing tip below you might opt to not include the box-sizing property in your CSS reset.

^{Back to top}

Inherit box-sizing

Let box-sizing be inherited from html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

This makes it easier to change box-sizing in plugins or other components that leverage other behavior.

Demo

^{Back to top}

Use unset Instead of Resetting All Properties

When resetting an element's properties, it's not necessary to reset each individual property:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

You can specify all of an element's properties using the all shorthand. Setting the value to unset changes an element's properties to their initial values:

button {
  all: unset;
}

^{Back to top}

Use :not() to Apply/Unapply Borders on Navigation

Instead of putting on the border...

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...and then taking it off the last element...

/* remove border */
.nav li:last-child {
  border-right: none;
}

...use the :not() pseudo-class to only apply to the elements you want:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Here, the CSS selector is read as a human would describe it.

Demo

^{Back to top}

Check if Font Is Installed Locally

You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.

```css @font-face { font-family: "Dank Mono"; src: