Benchmark: Classnames vs CLSX vs cx v2

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.1.1/dist/clsx.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/@emotion/css@11.13.4/dist/emotion-css.umd.min.js"></script>

Script Preparation code:

var c = {
    a: true,
    b: false,
    c: undefined,
    d: "lorem-ipsum"
};
var someClasses = ['class1', true || 'class2', false && 'class3', true ? 'class4' : 'class5', c]

Tests:

classnames
let result = window.classNames(someClasses)
clsx
let result = window.clsx(someClasses)
cx
let result = window.emotion.cx(someClasses)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
cx

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
classnames	5501915.0 Ops/sec
clsx	14447509.0 Ops/sec
cx	2760250.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):

LLMs can make mistakes. Check important info.

The benchmark under discussion compares three different approaches to manipulating CSS class names in JavaScript: **classnames**, **clsx**, and **cx (from Emotion)**. Each of these libraries provides a way to dynamically construct class name strings based on certain conditions, but they have different implementations, performance characteristics, and usability.

### 1. Libraries and Their Purpose

- **classnames**: This is a popular utility that allows developers to conditionally join class names together. It supports various input types, allowing for both string and object inputs where keys are class names and values are booleans indicating whether the class should be included.

- **clsx**: This library is a smaller and more lightweight alternative to classnames. It is optimized for performance and also allows for conditional class name generation, but it’s designed to have a simpler and more efficient code base, making it more performant than classnames in many cases.

- **cx (from Emotion)**: cx is part of the Emotion library, which is designed for writing CSS styles with JavaScript. The cx function allows for conditional application of class names, similar to the other two libraries, but it may also be integrated with Emotion's styling capabilities.

### 2. Benchmark Options Compared

The benchmark compares the execution speed of these three methods by running a set of conditions against an object `c` and a predefined array of classes:

```javascript
var c = {
    a: true,
    b: false,
    c: undefined,
    d: "lorem-ipsum"
};
var someClasses = ['class1', true || 'class2', false && 'class3', true ? 'class4' : 'class5', c];
```

Here, the `someClasses` variable serves as input, combining strings, boolean expressions, and an object, creating various potential class names dynamically.

### 3. Performance Results

The benchmark results show the number of executions per second for each method:

- **clsx**: 5,794,466.5 executions/second
- **classnames**: 3,886,118.25 executions/second
- **cx**: 2,496,265.0 executions/second

### 4. Pros and Cons

**classnames:**
- **Pros**: 
  - Widely used and well-documented.
  - Supports a variety of input types (strings, arrays, objects).
- **Cons**:
  - Larger file size compared to clsx, which can impact performance somewhat.

**clsx:**
- **Pros**: 
  - Smaller and more performant, making it a great option for high-frequency situations.
  - Syntax is simple and easy to use, similar to classnames.
- **Cons**:
  - Less well-known and referenced compared to classnames, but it is gaining popularity.

**cx (from Emotion):**
- **Pros**:
  - Integrates well with Emotion’s styling capabilities, allowing you to write styles and class manipulation in a cohesive manner.
  - Provides similar functionality regarding handling class names conditionally.
- **Cons**:
  - Can be slower when compared to clsx or classnames in a pure class name context since it is part of a larger library focused on styling.

### 5. Other Considerations

When choosing between these libraries, considerations include:

- **File Size**: If you are looking for a minimal footprint, clsx would be preferable.
- **Usability**: If your team is already using Emotion for styling, using the cx function might streamline your code.
- **Performance**: For high-frequency scenarios where class name calculation occurs often, prefer clsx for its better performance.
- **Legacy Code**: If there's existing code using classnames, the overhead for switching libraries may not be worth the performance gains unless profiling shows it’s a bottleneck.

### Alternatives

Other alternatives for conditional class names include:

- **Styled Components**: This operates on a similar principle but integrates class name generation with styled components directly.
- **Vanilla JavaScript template literals**: For simpler use cases, you might opt to use template literals to manually create class strings without relying on additional libraries.

In conclusion, the choice of which library to use should consider the specific demands of your project, coding style preferences, and performance requirements. Each of these libraries provides a robust solution for dynamically building class names but shines under different contexts.

Related benchmarks:

Classnames vs CLSX vs cx v2 (version: 0)

Compare CLSX vs Classnames vs an simpliest implementation of creating a template string

Comparing performance of: classnames vs clsx vs cx

Created: 6 months ago by: Guest

Jump to the latest result

classnames

clsx

cx

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):