# jedwatson/classnames

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jedwatson-classnames).**

17,794 stars · 557 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/JedWatson/classnames
- awesome-repositories: https://awesome-repositories.com/repository/jedwatson-classnames.md

## Description

classnames is a JavaScript utility for conditionally joining CSS class names into a single space-separated string. It functions as a class name manager that maps boolean flags and objects to specific styles for HTML attribute assignment.

The tool resolves abstract class identifiers to computed values, facilitating integration with modular styling systems. It allows for the mapping of dynamic identifiers to scoped class names through a dedicated module resolver.

The utility processes strings, arrays, and objects to handle dynamic class name management. It includes capabilities for recursive array flattening and the removal of duplicate entries to ensure unique identifiers in the final output.

## Tags

### Web Development

- [Conditional Class Mappings](https://awesome-repositories.com/f/web-development/conditional-class-mappings.md) — Conditionally joins strings, arrays, and objects into a single space-separated string for CSS classes. ([source](https://github.com/jedwatson/classnames#readme))
- [Class Mapping](https://awesome-repositories.com/f/web-development/modular-architectures/css-style-modules/class-mapping.md) — Maps class names to specific module keys to resolve dynamic styles in modular systems. ([source](https://github.com/JedWatson/classnames/blob/master/HISTORY.md))

### User Interface & Experience

- [Class String Joiners](https://awesome-repositories.com/f/user-interface-experience/class-string-joiners.md) — Combines filtered class name fragments into a single string using whitespace as the delimiter.
- [CSS Module Resolvers](https://awesome-repositories.com/f/user-interface-experience/css-module-resolvers.md) — Resolves abstract class identifiers to computed values within modular styling systems.
- [Dynamic Class Management](https://awesome-repositories.com/f/user-interface-experience/dynamic-class-management.md) — Combines multiple strings and objects into a single class attribute for complex UI styling.
- [CSS Modules](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms/css-modules.md) — Integrates with CSS Modules to map dynamic identifiers to scoped class names.
- [Module Resolvers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms/css-modules/module-resolvers.md) — Maps abstract class identifiers to computed values when using modular styling systems.
- [CSS Class-Based Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling.md) — Applies CSS classes to elements based on changing state or logic within a JavaScript application.
- [Abstract Class Resolution](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-merging/abstract-class-resolution.md) — Binds abstract class identifiers to their computed values before final string merging. ([source](https://github.com/jedwatson/classnames#readme))
- [Conditional Joining](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/conditional-joining.md) — Conditionally joins CSS class names into a single space-separated string based on truthy values.
- [Class Name Deduplicators](https://awesome-repositories.com/f/user-interface-experience/class-name-deduplicators.md) — Removes repeated class entries to ensure the final output contains only unique identifiers.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Manages visual state by programmatically toggling CSS classes on frontend components.
- [Deduplication](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-merging/deduplication.md) — Strips repeated entries from the final class string to ensure unique identifiers. ([source](https://github.com/jedwatson/classnames#readme))