CSS naming hasn't evolved.
Everything else in development has — JavaScript, Python, APIs — but CSS is still stuck in:
background-color: #111;
border-radius: 8px;
Hyphens. Everywhere.
Meanwhile, the rest of your stack uses:
- camelCase (JavaScript)
- snake_case (Python, databases)
That mismatch isn't just annoying — it's inefficient.
The Real Problem: Context Switching
Every time you write CSS, your brain does a silent conversion:
backgroundColor → background-color
user_name → user-name
That's friction. And friction slows teams down.
Even modern systems still enforce kebab-case in CSS — meaning developers constantly translate between conventions.
FSCSS Changes the Rule
With FSCSS (Figured Shorthand Cascading Style Sheets), you don't adapt to CSS...
CSS adapts to you.
Write CSS Like Your Actual Code
camelCase — Frontend-friendly:
@import((*) from camelCase)
.card {
backgroundColor: #111;
borderRadius: 12px;
}
snake_case — Backend-friendly:
@import((*) from snake_case)
.card {
background_color: #111;
border_radius: 12px;
}
Both compile to:
background-color: #111;
border-radius: 12px;
No hacks. No runtime overhead. Just valid CSS.
Why This Matters More Than It Looks
1. Your brain stops translating
Stick to one mental model - whichever matches how you already think.
2. Your stack becomes consistent
- React / Next.js → camelCase
- Django / APIs → snake_case
- CSS → now matches both
3. Teams move faster
No more "Is it borderRadius or border-radius again?" you already know, because you're already using it.
It Goes Beyond Naming
FSCSS also lets you build reusable styling logic and more:
@define glassEffect() {
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.2);
}
.hero {
@glassEffect()
}
Your CSS starts behaving more like a system.
Learn More
Kebab-case made sense when CSS was isolated. But modern development is interconnected.
FSCSS brings CSS into alignment with the rest of your stack and removes one of the most subtle productivity killers in frontend development.