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.

@namespace "Page";
.root:hover .thumbnail { background:red; }
.thumbnail { background:green; }
.thumbnail:hover { background:blue; }

/* CSS output */
.Page__root:hover .Page__thumbnail { background:red; }
.Page__thumbnail { background:green;}
.Page__thumbnail:hover { background:blue; }

/* comp.jsx */
import React from 'react';
import { style, classes } from './comp.st.css';

class Comp extends React.Component {
    render () {
        return (
            <div className={style(classes.root, {}, this.props)}>
                <img className={style.thumbnail} />
            </div>
        )
    };
}

Note:
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. These classes are also imported using the react-integration and applied to the DOM as needed.

Note: Classes imported this way should be scoped to your local stylesheet by adding .root or a local class as a prefix to the selector. Adding the scoping causes the selector to affect only the rendering subtree from this point onwards. If classes are imported without scoping to your local stylesheet, this may cause unexpected effects throughout your project.

Example

/* 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__myIcon.Button__icon */
.myIcon { 
    -st-extends: icon; 
}

/* @selector .Form__root .Button__icon */
.root .icon {}

/* @selector .Form__label.Button__label */
.label {
    -st-extends: label;
}

/* 
    JavaScript runtime exports:
    {
        root: "Form__root",
        myIcon: "Form__myIcon Button__icon",
        icon: "Button__icon",
        label: "Form__label Button__label"
    }
*/

Usage