Protips

repo: AllThingsSmitty/css-protips
category: Front-End Development related: Css

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.

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */ local("Dank Mono"), /* Postscript name */ local("Dank Mono"),
    /* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

H/T to Adam Argyle for sharing this protip and demo.

^{Back to top}

Add line-height to body

You don't need to add line-height to each <p>, <h*>, et al. separately. Instead, add it to body:

body {
  line-height: 1.5;
}

This way textual elements can inherit from body easily.

Demo

^{Back to top}

Set :focus for Form Elements

Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent than a browser's default implementation:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: 0.05em;
}

Demo

^{Back to top}

Vertically-Center Anything

No, it's not black magic, you really can center elements vertically. You can do this with flexbox...

html,
body {
  height: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

...and also with CSS Grid:

body {
  display: grid;
  height: 100vh;
  place-items: center;
}

[!TIP] Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has a nice write-up on doing all of that.

Demo

^{Back to top}

Use aspect-ratio Instead of Height/Width

The aspect-ratio property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use object-fit with it to prevent disrupting the layout if the height/width values of images changes.

img {
  aspect-ratio: 16 / 9; /* width / height */
  object-fit: cover;
}

Learn more about the aspect-ratio property in this web.dev post.

Demo

^{Back to top}

Comma-Separated Lists

Make list items look like a real, comma-separated list:

ul > li:not(:last-child)::after {
  content: ",";
}

Use the :not() pseudo-class and no comma will be added to the last item.

[!NOTE] This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.

^{Back to top}

Select Items Using Negative nth-child

Use negative nth-child in CSS to select items 1 through n.

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n + 3) {
  display: block;
}

Or, since you've already learned a little about using :not(), try:

/* select all items except the first 3 and display them */
li:not(:nth-child(-n + 3)) {
  display: block;
}

Demo

^{Back to top}

Use SVG for Icons

There's no reason not to use SVG for icons:

.logo {
  background: url("logo.svg");
}

SVG scales well for all resolution types and is supported in all browsers back to IE9. Ditch your .png, .jpg, or .gif-jif-whatev files.

[!NOTE] If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

^{Back to top}

Use the "Lobotomized Owl" Selector

It may have a strange name but using the universal selector (*) with the adjacent sibling selector (+) can provide a powerful CSS capability:

* + * {
  margin-top: 1.5em;
}

In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em.

[!TIP] For more on the "lobotomized owl" selector, read Heydon Pickering's post on A List Apart.

Demo

^{Back to top}

Use max-height for Pure CSS Sliders

Implement CSS-only sliders using max-height with overflow hidden:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

The element expands to the max-height value on hover and the slider displays as a result of the overflow.

^{Back to top}

Equal-Width Table Cells

Tables can be a pain to work with. Try using table-layout: fixed to keep cells at equal width:

.calendar {
  table-layout: fixed;
}

Pain-free table layouts.

Demo

^{Back to top}

Get Rid of Margin Hacks With Flexbox

When working with column gutters you can get rid of nth-, first-, and last-child hacks by using flexbox's space-between property:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Now column gutters always appear evenly-spaced.

^{Back to top}

Use Attribute Selectors with Empty Links

Display links when the <a> element has no text value but the href attribute has a link:

a[href^="http"]:empty::before {
  content: attr(href);
}

That's really convenient.

Demo

[!NOTE] This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.

^{Back to top}

Control Specificity Better with :is()

The :is() pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form.

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: green;
}

The above ruleset is equivalent to the following number selector rules...

section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6,
nav h1,
nav h2,
nav h3,
nav h4,
nav h5,
nav h6 {
  color: green;
}

Demo

^{Back to top}

Style "Default" Links

Add a style for "default" links:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Now links that are inserted via a CMS, which don't usually have a class attribute, will have a distinction without generically affecting the cascade.

^{Back to top}

Intrinsic Ratio Boxes

To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

truncated — full list on GitHub