Uncommon CSS tips

Use ems, rems and pixels

Use ems for padding and margin. Use rems for font-size. Use pixels for borders.

Build modular CSS components

.box {
  padding: 1em;
  border-radius: .5em;
}

// the font sizes will adjust the padding and border radius automatically

.box-large {
  font-size: 1.5rem;
}

.box-small {
  font-size: .75rem;
}

Use initial and inherit sometimes

Use initial to reset the styles to default. Inherit will allow you to get the styles from the parent element.

Don't think in pixels

When using rems and ems, don't think "that's 16 pixels, divided by..." - think it's bigger or smaller than usual.

Set default font size using vmin and ems

This scales your font sizes on any screen without using any media queries, and works perfectly with user defined font sizes.

:root {
  font-size: calc(0.5em + 1vw);
}

Use the lowest specificity possible

If you're not using CSS-in-JS or CSS/SCSS Modules, make your life easier by avoiding id and important selectors.

Set your pseudo styles in order

If more than one is used, the last style will override the previous ones.

a:link {

}

a:visited {

}

a:hover {

}

a:active {

}

Avoid shorthand properties

Shorthand properties will automatically set values for the other fields and can unexpectedly override your previous styles.

For example:

body {
  font: /* Shorthand that accepts multiple values. Most people don't memorize this */
}


body {
  font-size: 
  font-weight: normal;
  //... more explicit
}

Use unitless values when possible

For things like line-height, it's much better to use a unitless value like 1.2, then a fixed value like 10px.

CSS custom properties (aka CSS Variables) are better than SCSS

CSS custom properties can be added, changed with JavaScript dynamically, and can do some neat things like reassign values in a local scope, for things like creating inverted color schemes, user defined styles, themes, etc.

Avoid magic numbers

Use calc in place of random percentage values that could easily break on different screen sizes.

Here's an example of adding a consistent padding to an element, while keeping it at 25% width.

.box {
  width: calc(25% - 1em);
  padding: 1em;
}

Avoid setting the height

Unless you have no other choice. Use flexbox to automatically gets multiple elements at the same height.

Prefer setting min and max height instead so the browser can adjust as needed. And avoid using percentages for height - they'll only work if the parent container has a set width.

Vertical alignment

Either use flexbox, or set an equal padding or margin on the top and bottom and let the browser do it for you.

Margin collapse

Top and bottom margins will collapse, the largest wins. This is prevented when adding an overflow property other than visible, a border or padding between the two elements, is fixed or absolute positioned, is using flexbox or table cell.

Apply styles to sibling containers only

This only adds margin to the top of the .box class if it's after another .box class.

.box + .box {
  margin-top: 1em;
}

Or apply the margin to all elements that are not the first child, and most likely remove the need for many other selectors going forward.

This selector is called the "lobotized owl" by many.

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

Convert navigation links to block elements

This will ensure that they add to the parent container height.

Add margin to flexbox elements

Simply add margin: auto; to add margin to your flexbox children.

Happy coding! SL