CSS Class Selectors

You use CSS classes to define the local name of internal component parts. For example, you can define a .button in a menu component.

In Stylable, class selectors are scoped to the namespace of the stylesheet.

You should use camelCase to name class selectors. Avoid using hyphens (-) and capital first letters.

/* CSS */
@namespace "Page";
.thumbnail { background:green; }
.thumbnail:hover { background:blue; }
.gallery:hover .thumbnail { background:red; }
/* CSS output*/
.Page__root .Page__thumbnail { background:green;}
.Page__root .Page__thumbnail:hover { background:blue; }
.Page__root .Page__gallery:hover .Page__thumbnail { background:red; }
/* React - inside a stylable render */
<div className="gallery">
    <img className="thumbnail" />

In Stylable, as you can see in these examples, .root as a class name is reserved for the main root.
CSS class can also define states and extend another component.

Class selector export

Any class defined in a Stylable stylesheet is exported as a named export and can be imported by other stylesheets using the directive -st-named.


/* button.st.css */
@namespace "Button";
.root { background:green; }
.icon { border: 2px solid black; } 
.label { font-size: 20px; } 
/* form.st.css */
@namespace "Form";
:import {
    -st-from: './button.st.css';
    -st-named: icon, label; 
    @selector .Form__root .Form__myIcon.Button__icon 
    @export Form__myIcon Button__icon
.myIcon { 
    -st-extends: icon; 
    @selector .Form__root .Button__icon 
    @export Button__icon
.icon {}
    @selector .Form__root .Form__label.Button__label 
    @export Form__label Button__label
.label {
    -st-extends: label;