FSCSS is built around a modular, composition-first model. It doesn’t try to be a rigid UI framework. Instead it treats styling as reusable style units and design tokens that compile to standard CSS.
You get clear structure and encapsulation without a heavy JavaScript runtime or a complex build pipeline.
Composition over frameworks
Most tools push you toward components that own markup, state, and styles together. FSCSS stays in the style layer:
-
Tokens live on
:root(or a scoped root define) -
Shapes are
@definehelpers that accept a selector - Pages import only the helpers they need
@import((progress-root, circle-progress) from circle-progress)
@progress-root()
@circle-progress(.progress)
That compiles to plain CSS. No runtime component tree—just styles you can combine the same way you combine utility classes, but with real parameters and shared tokens.
Modules like circle-progress, form, and st-core follow the same pattern: one root for tokens, namespaced defines, selective import.
Shorthand property multiplexing
To cut repetition, FSCSS supports arithmetic-style shorthand that expands to multiple properties at compile time.
Example — set width and height in one go:
%2(width, height [: 100px;])
At compile time that becomes identical declarations on both properties. Same idea scales to padding axes, gaps, and other paired values when you want symmetry without typing the same length twice.
See more patterns in the examples and the repo.
Keyframe and array automation
A large part of FSCSS is removing hand-written repetition for motion and variants.
Native-feeling structures:
-
@arr— declare lists of values -
count()/ index arrays — drive N steps -
rpt()— repeat a fragment (e.g. nested selectors, staggered delays)
You can generate staggered animations, stepped color stops, or nested layout selectors without copy-pasting keyframe blocks or selector chains.
@arr levels[count(4)]
That’s the same idea as the nested-loop guide: one loop, many selectors.
Companion to modern CSS—not a replacement
FSCSS is intentionally a lightweight pre-compilation layer. It doesn’t hide the platform.
It works alongside:
- Container queries
-
:has() - Anchor positioning
-
color-mix(),conic-gradient, masks,clip-path
You author shorter, structured source; the output is readable CSS that uses what browsers already do well. Ship via:
| Mode | When |
|---|---|
CDN runtime (runtime.js / esm.js) |
Prototyping, demos |
CLI (fscss in.fscss out.css) |
Production, zero runtime |
Mental model
- Compose modules and defines, don’t inherit a framework
- Multiplex repeated dimensions with shorthand where it helps
-
Automate lists and motion with methods like
@arr - Emit standard CSS that plays with modern selectors and layout
FSCSS — figured shorthand, plain CSS output.
FSCSS – Lightweight CSS Preprocessor | Figured Shorthand CSS
Build faster with FSCSS. A powerful shorthand CSS system designed for scalable and efficient frontend styling.
fscss.devtem.org
Top comments (0)