Why kebab-case is Outdated — And How FSCSS Fixes It

Why kebab-case is Outdated — And How FSCSS Fixes ItFSCSS tutorial

CSS naming hasn’t evolved. Everything else in development has — JavaScript, Python, APIs — but CSS...

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 is not 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;
}
Enter fullscreen mode Exit fullscreen mode

snake_case (Backend-friendly)

@import((*) from snake_case)

.card {
  background_color: #111;
  border_radius: 12px;
}
Enter fullscreen mode Exit fullscreen mode

What Happens Behind the Scenes

Both become:

background-color: #111;
border-radius: 12px;

FSCSS maps naming styles directly to valid CSS — no hacks, no runtime overhead.

Why This Is a Bigger Deal Than It Looks

1. Your Brain Stops Translating

Camel case uses capital letters to separate words
Snake case uses underscores instead

FSCSS lets you stick to one mental model.

2. Your Stack Becomes Consistent

React / Next.js → use camelCase

Django / APIs → use snake_case

CSS → now matches both

3. Teams Move Faster

No more:

“Wait, what’s the CSS version of this?”

“Is it borderRadius or border-radius again?”

You already know the answer because you’re already using it.

Extend Beyond Naming

FSCSS isn’t just about syntax - it lets you build reusable styling logic:

@define glassEffect(){
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.2);
} 

.hero {
  @glassEffect()
}
Enter fullscreen mode Exit fullscreen mode

Now your CSS behaves more like a system.

Learn More

If you want to go deeper into each approach:

Snake case guide:
https://figsh.devtem.org/how_to_use_snakecase_fscss

Camel case guide:
https://figsh.devtem.org/how_to_use_camelcase_fscss

Final Thought

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.