Skip to main content

Build a Stylable Application

When building a Stylable application, you want to share definitions between parts of the application and consume 3rd party Stylable component libraries.

The project.st.css file#

It is recommended to have a project commons stylesheet that includes:

  • Shared common CSS definitions between parts of the project:

An application would define CSS with the final style definitions:

/* project.st.css */
@namespace "project";
:vars {
color1: white;
color2: red;
fontBig: 30px;
fontSmall: 10px;
}
:import {
-st-from: './button/button.st.css';
-st-default: Button;
}
.cancelButton {
-st-extends: Button;
color: value(color1);
background: value(color2);
}

Stylable component#

The Stylable component best practices guide describes ways to design a good component that can be styled. However, when building your application, it is also common to define components with their final CSS. This makes them less "themable", but is much simpler.

In the following code you can see a component that is described with:

  • 2 colors used from project
  • 1 component variant
@namespace "dialog";
:import {
-st-from: './project.st.css';
-st-named: color1, color2, cancelButton;
}
:import {
-st-from: './button/button.st.css';
-st-default: Button;
}
.root {
color: value(color1);
background: value(color2);
}
.ok {
-st-extends: Button;
}
.cancel {
-st-extends: cancelButton;
}