Sensible CSS defaults

2018-11-02

These CSS styles will speed up the time it takes to start a new project:

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

img {
  display: block;
  max-width: 100%;
}

The first rule says that, for elements, include the border and padding in the size calculations. This makes most sizing effects far more intuitive.

The second rule sets the margins on all elements to 0.

The third rule, applied to the img selector, turns all images into block elements instead of inline elements.

Finally, setting a max-width of 100% for all the img elements sets you up for responsive design.

Altogether, these four rules make elements behave a bit more intuitively.