Skip to main content

Shared Classes

When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.

Defining a shared class

In the commons stylable stylesheet of your project (usually named, you define a CSS class with a descriptive name like emphasisBox.
.emphasisBox {
background: pink;
color: white;

Use shared classes in components

A component's Stylable stylesheet can use and extend shared classes:
@st-import [emphasisBox] from "./";
selector: .comp__root .project__emphasisBox
js value: "project__emphasisBox"
.root .emphasisBox {}
selector: .comp__messageBox.project__emphasisBox
js value: "comp__messageBox project__emphasisBox"
.messageBox {
-st-extends: emphasisBox;

For the .emphasisBox selector, we manually added the .root class to avoid overriding emphasisBox outside this scope.