CSS Protips

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

1. Use :not() to Apply/Unapply Borders on Navigation
2. Add Line-Height to body
3. Vertically-Center Anything
4. Comma-Separated Lists
5. Select Items Using Negative nth-child
6. Use SVG for Icons
7. Text Display Optimization
8. Use max-height for Pure CSS Sliders
9. Inherit box-sizing
10. Equal Width Table Cells
11. Get Rid of Margin Hacks With Flexbox

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;
}

It's clean, readable, and easy to understand without the need for hack-y code.

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;
}

This way textual elements can inherit from body easily.

Vertically-Center Anything

No, it's not black magic, you really can center elements vertically:

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

Look how simple this is.

Note: Watch for some buggy behavior with flexbox in IE11.

Comma-Separated Lists

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

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

Use the :not() pseudo-class for the last list item.

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;
}

Well that was pretty easy.

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. So ditch your .png, .jpg, or .gif-jif-whatev files.

Text Display Optimization

Sometimes fonts don't display optimally on all devices, so let the device browser help:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Note: There is no text-rendering support for IE/Edge.

Use max-height for Pure CSS Sliders

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

.slider ul {
  max-height: 0;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}

You can animate to "auto" height!

Inherit box-sizing

Let box-sizing be inheritted 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.

Equal Width Table Cells

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

.calendar {
  table-layout: fixed;
}

Pain-free table layouts.

Get Rid of Margin Hacks With Flexbox

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

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

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

Support

These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.