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;
.
.local[className]
was just an experiment. @markdalgleish proposed:local(className)
or:local(.className)
.:className
could conflict with other pseudo-selectors i. e. (:not
or:root
) and is not easy to distinguish with.className
(:className
)Nice idea to mix multiple classes in the exported property. (traits)
This propably only work when selector is a single class, but still cool.
How about using ES6 like modules for CSS? This would make traits local too. (nothing need to be global)
definitions.css could just contain normal local-scoped classes. We shouldn't distinguish between local classes and traits. traits are just imported local classes.
Traits would be a construct of a higher level language.
Optionally we can use this syntax if we want to be compatible to CSS:
Opinions?