What Is Kebab-Case? How It’s Used in CSS, URLs, and APIs

Ever wondered why URLs like your-site.com/user-profile feel easier to read than messy strings with underscores or random capitalization?

That’s not accidental—it’s the result of a simple but powerful naming convention called kebab-case (also known as spinal-case or slug-case). While it looks basic, it plays a critical role in how developers write CSS, structure URLs, and design APIs.

In this guide, you’ll learn not just what kebab-case is—but why it works, where it should (and shouldn’t) be used, and how to apply it correctly in real-world development.

• Clear definition of kebab-case with examples
• Why hyphens are used instead of spaces
• How kebab-case works in CSS, URLs, and APIs
• SEO benefits of kebab-case in URLs
• When NOT to use kebab-case
• Comparison with other naming conventions
• Best practices and common mistakes

Why Naming Conventions Like Kebab-Case Matter

Naming conventions aren’t just about style—they directly impact how easily humans and machines understand your code.

Inconsistent naming leads to confusion, harder debugging, and poor collaboration. In contrast, structured naming like kebab-case creates clarity across files, systems, and even search engines.

If you’re building anything on the web, using a reliable case converter is essential for maintaining consistent, scalable, and maintainable code.

What Is Kebab-Case?

Basic Format Rules

Kebab-case is a naming convention where:

• All words are lowercase
• Words are separated by hyphens (-)
• No spaces or special characters are used

Quick Examples

• user-profile
• main-navigation-menu
• order-history-page

Think of the hyphen as a visible separator—it makes multi-word names readable at a glance.

Why Kebab-Case Exists (The Logic Behind It)

Replacing Spaces in Code and URLs

Spaces are not valid in most programming contexts. Kebab-case replaces them with hyphens, which are safe and widely supported.

Readability vs Machine Interpretation

Unlike camelCase, where words blend together, kebab-case keeps each word clearly separated—making it easier to scan quickly.

Why Hyphens Work Better

Hyphens act as natural word boundaries. Browsers, servers, and search engines all interpret them consistently. There’s a historical reason for this too: CSS was designed before camelCase became dominant in JavaScript, and hyphen-separated names were already the established web standard—so they stuck, and for good reason.

How Kebab-Case Is Used in CSS

CSS Property Names

CSS itself is built on kebab-case. Every property follows this format:

• background-color
• font-size
• margin-top

This extends to HTML attributes as well—aria-label and data-* attributes (like data-user-id) follow the same convention, keeping your markup consistent with your stylesheets.

CSS Class Naming

Developers commonly use kebab-case for class names:

• .btn-primary
• .user-card
• .main-header

This keeps HTML and CSS aligned in a clean, readable format.

Scalable CSS (BEM + Kebab-Case)

In larger projects, kebab-case is often combined with structured naming systems like BEM:

• block__element–modifier
• example: card__title–large

This approach improves maintainability and makes styles easier to manage at scale.

How Kebab-Case Is Used in URLs (SEO + Readability)

URL Structure and Slugs

Kebab-case is the preferred format for URLs:

• example.com/user-profile-settings
• example.com/blog/what-is-kebab-case

These URLs are easy to read, share, and understand.

Why Hyphens Improve SEO

Search engines treat hyphens as word separators. This means:

• user-profile = “user profile”
• better keyword recognition
• improved indexing

Underscores don’t work the same way—Google treats them as word connectors, not separators, which can reduce how well individual keywords are recognised. Google’s own guidance has consistently recommended hyphens over underscores for URL slugs, which is why kebab-case is considered best practice for SEO-friendly URLs.

Good vs Bad URL Examples

How Kebab-Case Is Used in APIs

REST API URL Paths

Kebab-case is commonly used in API endpoints:

• /api/v1/user-settings
• /api/v2/order-history

It keeps endpoints readable and consistent.

Query Parameters

• ?sort-by=date
• ?user-id=123

This format makes parameters easier to understand at a glance.

Why JSON Uses camelCase Instead

While URLs use kebab-case, JSON data typically uses camelCase:

• { “userName”: “John” }

This is because hyphens are not valid in most programming variable names—they’re interpreted as subtraction operators.

Frontend vs Backend Naming Differences

Frontend systems (CSS, HTML, URLs) favor kebab-case for readability. Backend systems often use camelCase or snake_case for compatibility with programming languages.

When NOT to Use Kebab-Case

Programming Variables

Most languages do not allow hyphens in variable names:

• user-name → interpreted as subtraction

Language Limitations

Languages like JavaScript, Python, and Java require different naming styles for variables and functions.

Edge Cases

• Dates (e.g., 2025-01-01 may be misinterpreted)
• CLI flags with conflicting formats

Understanding where kebab-case breaks is just as important as knowing where it works.

Kebab-Case vs Other Naming Conventions

Each convention exists because different environments have different rules. For a broader view of how these styles interact, this complete guide to naming conventions covers all the major formats in one place.

Real-World Best Practices for Using Kebab-Case

• Keep URLs short and meaningful
• Avoid unnecessary words in slugs
• Stay consistent across your project
• Use kebab-case for anything user-facing

Consistency matters more than perfection—pick a standard and apply it everywhere.

Common Mistakes to Avoid

• Using kebab-case in JavaScript variables
• Mixing naming conventions randomly
• Overloading URLs with too many hyphens
• Ignoring readability in long strings

Small mistakes in naming can create long-term maintenance issues.

How to Convert Between Naming Conventions

Manual Conversion

Break words and reformat them based on rules:

• userSettings → user-settings

Tools and Automation

Rather than converting by hand, a dedicated kebab-case converter handles the transformation instantly—particularly useful when standardising large amounts of text or variable names across a project.

Workflow Integration

Modern frameworks often enforce naming standards, reducing inconsistency across teams.

FAQs About Kebab-Case

Is kebab-case best for SEO URLs?

Yes, because hyphens clearly separate words, making URLs easier for search engines to interpret.

Why not use underscores in URLs?

Underscores are not treated as natural separators, which can reduce readability and SEO clarity.

Can kebab-case be used in JavaScript?

Not for variables or functions, but it can be used in file names and URLs.

Is kebab-case required in CSS?

Yes, CSS properties are written in kebab-case by default.

Conclusion: When and Why to Use Kebab-Case

Kebab-case may look simple, but it plays a powerful role in modern web development. It improves readability, supports SEO, and creates consistency across CSS, URLs, and APIs.

The key is knowing where to use it—and where not to. Use kebab-case for anything user-facing, especially URLs and styles, but rely on other conventions for programming logic.

If you’re building scalable systems or optimising your site structure, a case converter is the fastest way to keep your naming clean, consistent, and production-ready.