CSS best practices for Sense themes

When to use CSS in a Sense theme

Use custom CSS only when there is no supported alternative.

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

Using built-in theme settings
Using supported chart properties
Adjusting layout and content choices

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

Stability rules

Treat all 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

/* 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

/* 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 */
.css-r93xwy--info.xyz123 {
  background: #333;
}