CSS Classes and Selectors

Use selectors when variables are not enough.

Selector strategy that stays maintainable

1. Scope by root classes first (.kea-search, .kea-search--{mode}, .kea-search-canvas).
2. Then target stable DOM markers (data-kea-component, data-kea-role, data-kea-action).
3. Keep selectors shallow and semantic.

/* Product grid (results page) */
.kea-products[data-kea-component="products"] {
  margin-top: var(--kea-spacing-md, 16px);
}

/* Selected facet option (where the data-kea-selected marker is emitted) */
.kea-facets__option[data-kea-selected="true"] {
  border-color: var(--kea-color-accent, #4b4efc);
  background: var(--kea-color-surface-alt, #f5f5f5);
}

/* Autocomplete-source product card title */
.kea-card[data-kea-source="autocomplete"] .kea-card__title {
  font-size: 13px;
}

Note: The data-kea-view attribute is also emitted by the storefront runtime alongside the kea-search--{mode} class composition. For broad styling, prefer the stable .kea-search--{mode} class form where available — the data attribute form is reserved for fine-grained per-view overrides. See DOM Markers Reference for the stable-vs-partial table.

What to avoid

• Deep DOM chains that depend on accidental markup.
• Undocumented markers.
• Positional selectors when a data-kea-* state marker exists.

Reference

• DOM Markers Reference
• Blocks