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 .t-trait--vertical
.
:local
exports 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.
Inside a :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;
.
@sokra I love this idea from your post:
I was wondering how we could nest CSS exports!