---
source: https://qlik.dev/extend/create-custom-themes/custom-themes-css-best-practices/
last_updated: 2026-09-18T09:26:47+02:00
---

# CSS best practices for Qlik Sense themes

## When to use CSS in a Qlik Sense theme

Use custom CSS only when there is no supported alternative.

Before adding CSS, check if you can solve the requirement by:

1. Using built-in theme settings
2. Using supported chart properties
3. Adjusting layout and content choices

Custom CSS should be the last option because UI internals can change between versions.

## Stability rules

Treat all Qlik Sense UI class names as unstable implementation details.

Do not depend on classes generated by the product UI. Class names can change without notice, and your
theme can break after an upgrade.

> **Warning:** Do not use top-level selectors such as `qv-client` or `qv-card`. These
> selectors are planned for removal in future versions.

## Recommended approach

When CSS is required, keep it scoped, minimal, and easy to remove.
If using custom css, make sure it is not crucial to your app design that the selectors are present.

## Examples

```css
/* Target custom extensions that you have control over */
.extension-super-table .row {
  max-height: 14px;
  background: #f0a;
}

/* Target elements with no other possible option */
.qvt-selections .current-selections-item {
  backgroud: #5365d0;
}
.chart-modules-tooltip .pic-tooltip div {
  backgroud: white;
  border: 1px solid black;
  color: black;
}
```

## Avoid these patterns

```css
/* Avoid: top-level selectors planned for removal */
.qv-client .some-class {
  font-size: 14px;
}

/* Avoid: internal selector that can change at any release */
.qv-object-container > div:nth-child(2) .qv-inner {
  margin: 0;
}

/* Avoid: styling based on generated class names, for example, a hashed class */
.css-r93xwy--info.xyz123 {
  background: #333;
}
```