Global traits, local components
The idea is to combine the best bit of global styling (reuse, small payload) and local styling (total isolation, first-class React syntax)
This is combined with the concept of traits: you can think of them as permitted property/value pairs. Instead of every component being able to have every CSS property available to it, you can reduce your permitted set to X font families, Y font-size + line-height pairs, Z foreground/background colour pairs, W padding amounts. This is based off my work using amcss on real projects — traits were the single key feature that kept me using AM.
The one-sentence explanation: A site defines a set of permitted visual features, all components are simply a combination of those features
@define-trait X establishes
X as a type of trait. These include the above mentioned concepts: typography, colouring, spacing, layout, etc.
Any CSS inside a
@define-trait :default block are shared by all users of that class. If a trait was
button, this would be all the default styling for a button.
Any sub-rule under a trait indicates a trait variant. These get turned into classes, and components mix them in. E.g. the variant
vertical of trait
flex gets turned into the class
local to React, which is a set of classnames that include an auto-generated class-name for any one-off CSS if needed, plus any traits it includes. Using that in React is dead simple.
:local expression, a
& block will allow arbitrary CSS to be written. That will be extracted into a one-off class.
Using traits inside a
:local block should be the main way you include styles. The syntax is like pure css:
trait: variant-a variant-b;.