Case Conversion for CSS Class Names and IDs
CSS class names and HTML IDs live at the intersection of design and development, and the naming conventions you choose affect everything from code readability to collaboration between designers and developers. While CSS technically allows class names in any case format, the industry has strongly converged on kebab-case as the standard. Understanding why, how to apply it consistently across your stylesheet, and how to convert names from other conventions when integrating design tokens, component libraries, or generated code makes your front-end work faster and more maintainable.
Why CSS Uses kebab-case
kebab-case (all lowercase with hyphens between words) became the standard for CSS because of how CSS property names themselves are written. All built-in CSS properties use this convention: background-color, font-size, margin-top, flex-direction, border-radius, text-transform, z-index. Using the same convention for class names creates visual consistency throughout stylesheets — everything from selectors to property names to values follows a unified pattern. CSS is case-sensitive in some contexts. HTML and CSS class names in modern browsers are case-sensitive: the class 'Button' is different from 'button'. Using all-lowercase kebab-case eliminates case sensitivity issues entirely — there is only one possible capitalization of .nav-link or .hero-section. kebab-case is also more readable than other options for CSS. camelCase works in JavaScript because there is surrounding syntax context (let, const, function) that helps distinguish identifiers. In CSS, a long selector like .userProfileCardWrapper is harder to parse visually than .user-profile-card-wrapper. The hyphens act as natural word separators that the eye can follow more easily than mixed-case words. Major CSS frameworks all use kebab-case. Bootstrap class names are kebab-case (.btn, .btn-primary, .col-md-6, .nav-link). Tailwind CSS uses kebab-case with hyphens as numeric separators (bg-blue-500, text-lg, p-4). Foundation uses kebab-case. This industry-wide consistency means developers moving between projects immediately understand the naming convention.
BEM and Other CSS Naming Methodologies
BEM (Block, Element, Modifier) is the most widely used CSS naming methodology in professional front-end development. It extends kebab-case with two additional separators: double underscores for elements and double hyphens for modifiers. In BEM: the block is the top-level component (.card), elements within the block are connected with double underscores (.card__title, .card__body, .card__footer), and modifiers that represent different states or variants are connected with double hyphens (.card--featured, .card--loading, .card__title--large). Converting a design component's parts to BEM-compliant CSS class names follows a consistent pattern: the component name becomes the block, its internal parts become elements, and its states or variants become modifiers. All parts use kebab-case within each segment. OOCSS (Object-Oriented CSS) uses simple kebab-case class names focused on single responsibilities: .media, .box, .clearfix. This methodology produces shorter, more reusable class names. SMACSS (Scalable and Modular Architecture for CSS) uses a prefix convention: state classes start with .is- (.is-active, .is-hidden, .is-loading), layout classes start with .l- (.l-sidebar, .l-header), module classes use simple kebab-case without prefix (.dropdown, .navigation, .search-form). Utility-first approaches like Tailwind CSS use a class-per-property model where class names directly encode the CSS property and value: .text-sm (font-size: 0.875rem), .bg-white (background-color: white), .flex (display: flex). These are generated by the framework rather than written manually. For teams defining their own design system, establishing a naming methodology before writing CSS prevents the naming inconsistency that accumulates in long-lived stylesheets.
Converting Design Token Names to CSS
Design tokens are the named values that encode a design system — colors, spacing, typography, shadows. They are defined in design tools like Figma or Token Studio and need to be exported as CSS custom properties, JavaScript objects, or design tool variables. Converting between these formats requires reliable case conversion. In CSS, custom properties (CSS variables) use kebab-case: --color-primary, --font-size-base, --spacing-4, --border-radius-md. This is the standard used by most design system CSS frameworks. In JavaScript and TypeScript, the same tokens are often expressed as camelCase object properties: colors.primary, fontSizes.base, spacing[4], borderRadius.md. Or as quoted strings in objects: { 'color-primary': '#0011ff', 'font-size-base': '1rem' }. In Figma and other design tools, token names often use either slashes (Color/Primary, Font Size/Base) or dots (color.primary, fontSize.base) as separators, reflecting the hierarchical organization. When exporting design tokens from a design tool to CSS, the conversion path is typically: replace slashes or dots with hyphens, convert to lowercase — which is exactly the kebab-case conversion. Using a case converter on a list of token names from your design tool produces valid CSS custom property names instantly. When consuming CSS custom properties in JavaScript, you often need to convert in the other direction: from kebab-case CSS property names to camelCase JavaScript property names. The WikiPlus Case Converter handles this conversion bidirectionally.
Class Names in Component-Based Frameworks
Modern front-end frameworks like React, Vue, and Svelte handle CSS class names in ways that interact with case conventions in specific ways developers need to be aware of. In React JSX, the className attribute replaces the class attribute (because class is a reserved word in JavaScript). The class names themselves are strings and use the same kebab-case convention as regular CSS: className="card-title" or className="btn btn-primary". The attribute name is camelCase (className, htmlFor, tabIndex) but the class name values within the string are kebab-case. CSS Modules, used in React and other frameworks, create locally-scoped class names. In a CSS Module file (Component.module.css), you can define .cardTitle or .card-title. When used in JSX as styles.cardTitle or styles['card-title'], local scoping prevents naming conflicts across components. Some CSS Modules setups are configured to automatically convert kebab-case CSS class names to camelCase JavaScript property names for the styles object, allowing you to write .card-title in CSS and access it as styles.cardTitle in JSX. Styled Components and Emotion (CSS-in-JS libraries) define styles in JavaScript template literals or object notation. In object notation, CSS property names must be camelCase: { backgroundColor: 'blue', fontSize: '16px', borderRadius: '4px' }. In template literal notation, you can use standard CSS syntax with kebab-case properties. For teams transitioning between CSS conventions or integrating components from different source libraries, a case converter is a practical tool for systematically renaming class names from one convention to another across a set of CSS or JSX files.
Frequently Asked Questions
- Can I use camelCase for CSS class names?
- Yes, camelCase is technically valid in CSS. Class names can contain any combination of letters, digits, hyphens, and underscores (with additional restrictions on what they can start with). However, camelCase is not the industry standard for CSS. Most CSS codebases, frameworks (Bootstrap, Tailwind), and style guides use kebab-case. Using camelCase in a project that otherwise uses kebab-case creates inconsistency. If you are working in an environment where class names are generated programmatically from JavaScript (such as CSS-in-JS), camelCase in the JS side maps naturally — but the generated CSS class names themselves are usually hashed strings in production.
- Should HTML element IDs use kebab-case too?
- Yes. HTML IDs should use kebab-case for the same reasons as CSS class names: case sensitivity avoidance, readability, and consistency with CSS conventions. IDs are used in CSS selectors (#main-content, #site-nav), in HTML anchor links (href='#section-title'), in JavaScript selectors (document.getElementById('modal-overlay')), and in HTML for attribute linking to form inputs (for='email-address'). Consistent kebab-case across all of these references makes the code easier to write and maintain. Note that HTML IDs must be unique within a page, which is a constraint that class names do not have.
- How do I convert Figma component names to CSS class names?
- Figma component and layer names often use spaces and mixed capitalization: 'Button Primary', 'Card Large', 'Navigation Item Active'. To convert these to CSS class names, the process is: make lowercase, replace spaces with hyphens. 'Button Primary' becomes .button-primary, 'Card Large' becomes .card-large, 'Navigation Item Active' becomes .navigation-item--active (in BEM) or .navigation-item-active (in simple kebab-case). Use the WikiPlus Case Converter to select kebab-case and paste your Figma layer names — it handles the lowercasing and hyphenation automatically. Review the output for any names that need semantic adjustment to fit your naming methodology.