What's the name for hyphen-separated case?

Question

This is PascalCase: SomeSymbol

This is camelCase: someSymbol

This is snake_case: some_symbol

So my questions is whether there is a widely accepted name for this: some-symbol ? It's commonly used in url's.

Answer 1

There isn't really a standard name for this case convention, and there is disagreement over what it should be called.

That said, as of 2019, there is a strong case to be made that kebab-case is winning:

https://trends.google.com/trends/explore?date=all&q=kebab-case,spinal-case,lisp-case,dash-case,caterpillar-case

spinal-case is a distant second, and no other terms have any traction at all.

Additionally, kebab-case has entered the lexicon of several javascript code libraries, eg:

• https://lodash.com/docs/#kebabCase
• https://www.npmjs.com/package/kebab-case
• https://v2.vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

However, there are still other terms that people use. Lisp has used this convention for decades as described in this Wikipedia entry , so some people have described it as lisp-case . Some other forms I've seen include caterpillar-case , dash-case , and hyphen-case , but none of these is standard.

So the answer to your question is: No, there isn't a single widely-accepted name for this case convention analogous to snake_case or camelCase , which are widely-accepted.

Answer 2

It's referred to as kebab-case . See lodash docs .

Answer 3

它有时也被称为毛毛虫案例

Answer 4

This is the most famous case and It has many names

• kebab-case : It's the name most adopted by official software
• caterpillar-case
• dash-case
• hyphen-case or hyphenated-case
• lisp-case
• spinal-case
• css-case
• slug-case
• friendly-url-case

Answer 5

Adding the correct link here Kebab Case

which is All lowercase with - separating words.

Answer 6

As the character (-) is referred to as "hyphen" or "dash", it seems more natural to name this " dash-case ", or " hyphen-case " (less frequently used).

As mentioned in Wikipedia , " kebab-case " is also used. Apparently (see answer ) this is because the character would look like a skewer ... It needs some imagination though.
Used in lodash lib for example.

Recently, " dash-case " was used by

• Angular ( https://angular.io/guide/glossary#case-types )
• NPM modules
  • https://www.npmjs.com/package/case-dash
  • https://www.npmjs.com/package/dasherize

Answer 7

我一直叫它，听说它被称为“dashcase”。

Answer 8

There is no standardized name.

Libraries like jquery and lodash refer it as kebab-case . So does Vuejs javascript framework. However, I am not sure whether it's safe to declare that it's referred as kebab-case in javascript world.

Answer 9

我只想说它是hyphenated 。

Answer 10

Worth to mention from abolish:

https://github.com/tpope/vim-abolish/blob/master/doc/abolish.txt#L152

dash-case or kebab-case

Answer 11

I've always known it as kebab-case .

On a funny note, I've heard people call it a SCREAM-KEBAB when all the letters are capitalized.

Kebab Case Warning

I've always liked kebab-case as it seems the most readable when you need whitespace. However, some programs interpret the dash as a minus sign, and it can cause problems as what you think is a name turns into a subtraction operation.

first-second  // first minus second?
ten-2 // ten minus two?

Also, some frameworks parse dashes in kebab cased property. For example, GitHub Pages uses Jekyll , and Jekyll parses any dashes it finds in an md file. For example, a file named 2020-1-2-homepage.md on GitHub Pages gets put into a folder structured as \2020\1\2\homepage.html when the site is compiled.

Snake_case vs kebab-case

A safer alternative to kebab-case is snake_case , or SCREAMING_SNAKE_CAS E, as underscores cause less confusion when compared to a minus sign.

Answer 12

In Salesforce, It is referred as kebab-case . See below

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_names

Answer 13

Here is a more recent discombobulation. Documentation everywhere in angular JS and Pluralsight courses and books on angular, all refer to kebab-case as snake-case, not differentiating between the two.

Its too bad caterpillar-case did not stick because snake_case and caterpillar-case are easily remembered and actually look like what they represent (if you have a good imagination).

Answer 14

My ECMAScript proposal for String.prototype.toKebabCase .

String.prototype.toKebabCase = function () {
  return this.valueOf().replace(/-/g, ' ').split('')
    .reduce((str, char) => char.toUpperCase() === char ?
      `${str} ${char}` :
      `${str}${char}`, ''
    ).replace(/ * /g, ' ').trim().replace(/ /g, '-').toLowerCase();
}

Answer 15

This casing can also be called a "slug", and the process of turning a phrase into it "slugify".

https://hexdocs.pm/slugify/Slug.html