kebab-case とは
kebab-case（ケバブケース）は、スペースの位置にハイフンを入れ、すべての文字を小文字にする書き方です。
My Blog Post Titleはmy-blog-post-titleになりますbackgroundColorはbackground-colorになりますuser_profile_cardはuser-profile-cardになります
ツールの仕組み
ツールは各行の単語を見つけ、小文字にしてハイフンでつなぎます。単語の区切りとして認識するのは、スペース、アンダースコア、ドット、スラッシュ、そして camelCase や PascalCase の大文字です。句読点は取り除かれます。各行は別々に変換されるので、タイトルやクラス名のリストを貼り付ければ、対応するリストが返ってきます。
日本語の文字は区切られずにそのまま残ります。たとえば「ブログ記事 タイトル」は ブログ記事-タイトル になります。
| 入力 | 出力 |
|---|---|
| My First Blog Post! | my-first-blog-post |
| backgroundColor | background-color |
| user_profile_card | user-profile-card |
| ProductListItem | product-list-item |
| 10 Tips for Better Sleep | 10-tips-for-better-sleep |
kebab-case が使われる場所
- URL：
example.com/blog/my-first-post - CSS：
.nav-itemのようなクラス名や、font-sizeのようなプロパティ - HTML：
data-user-idのような属性や、<user-card>のようなカスタム要素の名前 - ファイル名とフォルダ名：特に Web 制作のプロジェクトで
- npm パッケージ：パッケージ名は小文字でなければならず、区切りには一般的にハイフンが使われます
- コマンドラインのフラグ：
--dry-run、--no-cache
URL スラッグに kebab-case を使う
スラッグとは、Web アドレスのうちページを識別する読みやすい部分のことです。良いスラッグは短く、小文字で、ハイフンで区切られています。ページのタイトルをここに貼り付けてたたき台を作り、短く整えましょう。
- タイトルを変換します：「10 Tips for Better Sleep」は
10-tips-for-better-sleepになります。 - スラッグが長ければ、不要な単語を削ります：
tips-better-sleep。 - ページのメインキーワードはスラッグに残します。
小文字にそろえることが大切なのは、多くの Web サーバーが /My-Page と /my-page を別のアドレスとして扱うからです。
日本語の記事でも、スラッグは英単語かローマ字にするのが一般的です。日本語のままの URL は共有したときに長い文字列（パーセントエンコード）に変換されて読みにくくなるため、記事の内容を表す短い英語のタイトルを考えてから変換するとよいでしょう。
ほかのスタイルとの比較
| スタイル | 例 | コードで使える？ |
|---|---|---|
| kebab-case | user-first-name | 使えない（ハイフンはマイナスの意味） |
| snake_case | user_first_name | 使える |
| camelCase | userFirstName | 使える |
ほかのスタイルが必要なら、スネークケース変換ツールやキャメルケース変換ツールを試してください。