Write CSS in camelCase or snake_case — FSCSS

Leader posted 1 min read

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:

backgroundColorbackground-color
user_nameuser-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.

1 Comment

1 vote

More Posts

How I Built a React Portfolio in 7 Days That Landed ₹1.2L in Freelance Work

Dharanidharan - Feb 9

5 Web Dev Pitfalls That Are Silently Killing Your Projects (With Real Fixes)

Dharanidharan - Mar 3

Designing Stats UIs with FSCSS and st-core

Figsh - Apr 4

⚡ Creating Custom Functions in FSCSS (Yes, CSS Can Do This)

Figsh - Mar 28

Stop Saying You're "Bad" at CSS. You're Forging a Superpower.

Habib - Nov 16, 2025
chevron_left

Related Jobs

View all jobs →

Commenters (This Week)

6 comments
1 comment
1 comment

Contribute meaningful comments to climb the leaderboard and earn badges!