Skip to content
Home

CSS and Styling

One can be forgiven for assuming that CSS is easy. After all, your stylesheets will probably work still work even when there are mistakes in them. However, this 'freedom' can be a trap.

It is crucial to do CSS right from the very beginning.

Otherwise you will find yourself making a fix of a fix, and so on. Also, refactoring and enhancements will often effect code deeper down as well.

Styling structure

To write more structured and uniform CSS code, so both you and your coworker can more easily read and use your code. It even helps during development, because you always are aware of where and what you have used of CSS properties already.

Using the same principles helps coworkers quickly find and understand the sentence and meaning of your CSS code.

Rational CSS properties order

  1. start the most influential and important properties first then work progressively toward aesthetics and animations.
  2. leave one empty line between these "logical" groups.

For the "logical" groups we recommend the following rational order principle:

.my-selector {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 10;
  display: flex;


  /* Box Model */
  width: 16rem;
  height: 16rem;
  margin: 2rem;
  padding: 1rem;
  color: #111;


  /* Typography */
  font:
    normal 1rem Helvetica,
    sans-serif;
  line-height: 1.5rem;
  text-align: left;


  /* Visual */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 0.25rem;
  opacity: 1;


  /* Animation */
  transition: all 1s;


  /* Misc */
  user-select: none;
  cursor: pointer;
}

You may check out this Prettier Plugin for handling it automatic with prettier.

CSS Units

Here is a list of what we should use as layout and styling units to embrace the best possible accessibility experience and visual correctness.

  • rem: Use rem as a default sizing unit - as long as no other unit if preferred.
  • em: Use em only on complex layouts, whenever you need the sizes to respond to constraints.
  • px: Use pixels on visual helper lines and borders. Borders don't need necessarily to be responsive.
  • viewport units and percentage: Use these units to make layout and component widths responsive. Use also for placing and positioning layout wrappers which can give a better user experience.

Use em for CSS @media queries for the best browser compatibility. Read more about viewport units, Media Queries and breakpoints.