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"
.emphasisBox { }
selector: .comp__root .comp__messageBox.project__emphasisBox
js value: "comp__messageBox project__emphasisBox"
.messageBox {
    -st-extends: emphasisBox;