Skip to main content

Shared Classes

When building a Stylable component library or a Stylable 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.

@namespace "project";
.emphasisBox {
background: pink;
color: white;

Use shared classes in components

A component's Stylable stylesheet can use and extend shared classes:

@namespace "comp";
:import {
-st-from: './';
-st-named: emphasisBox;
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 of this scope.