Skip to main content

CSS

Coding standards for (standard) CSS code.

Project setup​

Add reset styles​

To be able to use semantic elements in many use-cases, it makes sense to use a reset script to strip them from any browser default styling. This makes it much easier to style them yourself. You can use any reset script you want, as long as it benefits your project.

Add browser vendor prefixes​

You should add Autoprefixer to add browser vendor prefixes automatically. Autoprefixer uses Browserslist to determine which properties to add, so make sure you have that in place as well based on the browsers your project supports.

Many frameworks use Autoprefixer in their builds. In those cases you don’t have to do add vendor prefixes yourself.

Formatting​

We follow the CSS Guidelines. Read these first.

Use consistent formatting​

In short, the following formatting rules apply:

  • Use two (2) spaces for indentation. No tabs.
  • Keep lines 80 characters or less.
  • Prefer kebab-case over camelCasing or PascalCasing in names.
  • Give each selector its own line.
  • In properties, put one space after, but not before, the : character
  • Put closing braces of rule declarations on a new line.
  • Put blank lines between rule declarations.

Ordering properties correctly​

Ordering your (S)CSS properties makes your code more maintainable and readable. The ordering of your css rules is done automatically if you use our Stylelint setup.

.example {
  /* Generated content */
  content: '';

  /* Position and layout */
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;

  /* Display and visibility */
  display: flex;

  /* Clipping */
  overflow: visibe;

  /* Animation */
  animation: some-animation 2s;
  transition: 0.5s;

  /* Box model (from outside in) */
  margin: 0;
  box-shadow: none;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  width: 24rem;
  height: auto;
  padding: 1rem;

  /* Background */
  background-color: #eee;

  /* Typography */
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  color: #888;
}

You can find the complete list here: How to organize CSS.

Use logical properties​

You must use CSS logical properties to control layout through logical, rather than physical, direction and dimension mappings. This is especially important for RTL languages.

/* 🚫 Bad: using physical properties */
.selector {
  margin-left: 1rem;
}

/* ✅ Good: using logical properties */
.selector {
  margin-inline-start: 1rem;
}

You can find the whole list of logical properties here.

Add encoding​

To prevent issues with special characters, set the charset in your stylesheet, above all other code:

@charset 'utf-8';

Selectors​

Use scoped styles​

All major front-end frameworks (such as Angular) support scoped styles. Use scoped (s)css as much as possible. Use the :host selector to target the host element.

Target semantic elements​

In scoped CSS, use as short as possible class names using kebab-case, or target semantic elements (i.e. <header>, <footer> etc.).

Avoid using global CSS​

Prevent using global css styling as much as possible. Most of the times, this decouples your styling from your behavior (.ts) and structure (.html).

Avoid using broad selectors​

Don't use broad, high level selectors (such as *). Prefer creating a class selector over targeting elements. Prevent nesting css rules too much. Keep selectors short and on root level.

Naming conventions​

Keep names short and descriptive​

Keep your names as short and descriptive as possible.

Use kebab-case for selectors and custom properties​

Use kebab-case (e.g. .my-awesome-selector) instead of camelCase or snake_case for selectors and variables.

Optional: use BEM (block, element, modifier)​

If you need to use a naming convention (if you need to style elements on a global level, for example), use BEM.

Reusing code​

Use variables​

When you use a value or color more than once, create a variable.

Don’t use magic numbers​

Don’t use numbers directly in your code. Create a variable with a descriptive name that contains the numeric value.

/* ✅ Bad: usage of number directly in code */
.selector {
  transition-delay: 60000ms;
}

/* 🚫 Good: descriptive variable */
:root {
  --one-minute-in-milliseconds: 60000ms;
}

.selector {
  transition-delay: var(--one-minute);
}

Caveats​

Avoid margin collapse​

Use one direction for margin flows. Margins collapse, so using margin-block-end on an element that precedes an element using margin top, the margins will not stack but collapse.

TODO​