@dnb/eufemia/docs/uilib/usage/best-practices/for-styling.md

DNB Eufemia Design System UI Library

---
title: 'Best Practices for styling'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.797Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# CSS and Styling

One can be forgiven for assuming that CSS is easy. After all, your stylesheets will probably 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 affect code deeper down as well.

## Styling structure

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

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

### Rational CSS properties order

1. Start with the most influential and important properties first, then work progressively toward aesthetics and animations.
1. Leave one empty line between these "logical" groups.

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

```css
.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](https://www.npmjs.com/package/prettier-plugin-rational-order) for handling it automatic with [prettier](https://prettier.io/).

## 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 do not necessarily need 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](/uilib/usage/layout/media-queries).