Case Converter for CSS — Format Class Names and Properties
Convert text to kebab-case for CSS class names, custom properties, and data attributes. Ensure your stylesheets follow web standards and BEM methodology conventions.
CSS uses kebab-case for class names, custom properties, and data attributes. Frontend developers often need to convert component names or design tokens from camelCase (JavaScript) or PascalCase (design tools) into kebab-case for use in stylesheets and HTML.
CSS Naming Best Practices
Consistent class naming improves stylesheet maintainability. Use kebab-case for all class names, keep names descriptive but concise, and consider BEM or utility-first approaches. This tool helps you convert design token names from Figma or JavaScript variables into properly formatted CSS identifiers.
From Design Tokens to CSS Custom Properties
Design tools often export tokens in camelCase (primaryColor) or PascalCase (PrimaryColor). CSS custom properties require the format --primary-color. This converter bridges that gap, letting you transform token names into CSS-ready custom properties without manual editing.
Frequently Asked Questions
CSS was designed before camelCase became popular in programming. Since CSS properties like background-color already use hyphens, kebab-case became the natural convention for class names and custom properties. It also improves readability in HTML markup.
BEM uses kebab-case with special separators: block__element--modifier. This tool converts to kebab-case as a starting point. For BEM, type each part separately or use the output as a base and add the double underscores and double hyphens manually.