Skip to main content

Convertisseur de cas kebab Convertir du texte en cas kebab pour les classes CSS, les URL et les noms de fichiers.

Convertisseur de cas kebab illustration
📝

Convertisseur de cas kebab

Convertir du texte en cas kebab pour les classes CSS, les URL et les noms de fichiers.

1

Saisir le texte

Tapez ou collez du texte pour le convertir en kebab-case.

2

Voir le résultat

Voyez la sortie en minuscules et avec des traits d'union instantanément.

3

Copier et utiliser

Copiez pour les classes CSS, les URL ou les noms de fichiers.

Loading tool...

What Is Convertisseur de cas kebab?

Un convertisseur en kebab-case transforme le texte au format kebab-case, où toutes les lettres sont en minuscules et les mots sont séparés par des tirets. Le kebab-case est la convention d'appellation standard pour les noms de classes CSS, les attributs HTML, les chemins d'URL, les noms de packages npm et les noms de fichiers dans de nombreux frameworks. Exemples : "Hello World" devient "hello-world", "backgroundColor" devient "background-color". Le nom vient de la ressemblance visuelle des mots empalés sur un tiret, comme des éléments sur une brochette.

Why Use Convertisseur de cas kebab?

  • Norme pour les noms de classes CSS et les propriétés personnalisées
  • Format requis pour les chemins d'URL dans la plupart des frameworks Web
  • Utilisé pour les noms de packages npm et les noms de branches Git
  • Format le plus lisible pour les identificateurs à plusieurs mots dans les contextes Web
  • Gère la conversion à partir de n'importe quel format d'entrée

Common Use Cases

Classes CSS

Formatez les noms de classes suivant les conventions de nommage BEM ou standard CSS.

Chemins d'URL

Créez des chemins d'URL SEO-friendly à partir des titres de page ou des en-têtes de contenu.

Packages npm

Formatez les noms de packages suivant la convention kebab-case de npm.

Nommage de fichiers

Nommez les fichiers en kebab-case pour Angular, Vue et d'autres frameworks à base de composants.

Technical Guide

La conversion en kebab-case suit le même algorithme de séparation de mots que snake_case mais joint les mots avec des tirets au lieu de traits de soulignement. La saisie est divisée en fonction des espaces blancs, des traits de soulignement, des points, des tirets existants et des transitions de cas. Tous les mots sont convertis en minuscules et joints avec des tirets simples. Les tirets consécutifs sont compressés et les tirets de début et de fin sont supprimés. L'algorithme gère correctement les entrées camelCase ("backgroundColor" → "background-color"), PascalCase ("PageTitle" → "page-title") et les formats mixtes. Notez que les identificateurs kebab-case ne peuvent pas être utilisés directement comme noms de variables dans la plupart des langages de programmation car le tiret est l'opérateur de soustraction.

Tips & Best Practices

  • 1
    Les propriétés CSS sont nativement en kebab-case : background-color, font-size, border-radius
  • 2
    La méthodologie BEM utilise le kebab-case avec des traits d'union doubles : block__element--modifier
  • 3
    Les URL en kebab-case sont préférées pour le SEO par rapport aux tirets bas ou au camelCase
  • 4
    En JavaScript, accédez aux propriétés en kebab-case avec la notation entre crochets : obj["my-prop"]
  • 5
    Angular utilise le kebab-case pour les sélecteurs de composants (app-user-profile)

Related Tools

Frequently Asked Questions

Q Qu'est-ce que le kebab-case ?
Le kebab-case utilise toutes les lettres minuscules avec des traits d'union entre les mots : my-variable, page-title, nav-bar-item.
Q Pourquoi ne puis-je pas utiliser le kebab-case pour les variables JavaScript ?
Les traits d'union sont interprétés comme l'opérateur moins en JavaScript. Utilisez la notation entre crochets (obj["my-key"]) ou le camelCase à la place.
Q Le kebab-case est-il meilleur que le snake_case pour les URL ?
Google traite les traits d'union comme des séparateurs de mots mais pas les tirets bas, donc le kebab-case est préféré pour le SEO dans les URL.
Q Qu'en est-il des propriétés personnalisées CSS ?
Les propriétés personnalisées CSS (variables) utilisent le kebab-case avec un préfixe -- : --primary-color, --font-size-large.
Q Comment BEM se rapporte-t-il au kebab-case ?
BEM (Block Element Modifier) utilise le kebab-case comme base, avec __ pour les éléments et -- pour les modificateurs.

About This Tool

Convertisseur de cas kebab is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.