Benchmark: Classnames vs CLSX vs [].filter(Boolean).join(" ")

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 Preparation code:

var neco = [true, false, undefined, "lorem-ipsum"];

Tests:

classnames
let result = window.classNames("dolor-sit-amet", ...neco, undefined)
clsx
let result = window.clsx("dolor-sit-amet", ...neco, undefined)
Entries, filter, map, join
function cx(...input) { return input.filter(Boolean).join(" "); } let result = cx("dolor-sit-amet", ...neco, undefined)

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

clsx

4.6M/s

classnames

3.8M/s

Entries, filter, map, join

3.3M/s

Fastest: clsx (1.4x faster)

View exact numbers

✓ clsx: 4,566,301 ops/sec
• classnames: 3,757,596 ops/sec
• Entries, filter, map, join: 3,259,244 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
Entries, filter, map, join

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

clsx

23.1M/s

classnames

11.6M/s

Entries, filter, map, join

9.8M/s

View exact numbers

Test name	Executions per second
✓ clsx	23,087,940 Ops/sec
classnames	11,591,895 Ops/sec
Entries, filter, map, join	9,779,545 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark that compares three different approaches to creating a template string in JavaScript:

1. `classnames`
2. `clsx`
3. A simple implementation using `Entries`, `filter`, `map`, and `join`

**Classnames vs CLSX vs [] .filter(Boolean).join(" ")**

`Classnames` is a popular library for working with CSS class names in JavaScript. It allows you to easily create classes from an array of strings.

`CLSX` (short for Class Syntax eXtension) is a library that provides a more concise syntax for conditionally applying CSS classes.

The benchmark tests the performance of these two libraries, as well as a simple implementation using `Entries`, `filter`, `map`, and `join`.

**Options Compared**

The three options compared are:

1. **`classnames`**: A popular library for working with CSS class names.
	* Pros: Easy to use, well-maintained, and widely adopted.
	* Cons: May be slower due to the overhead of a library.
2. **`clsx`**: A lightweight library for conditionally applying CSS classes.
	* Pros: Fast, concise, and easy to use.
	* Cons: May not be as widely adopted or well-maintained as `classnames`.
3. **`[] .filter(Boolean).join(" ")`**: A simple implementation using built-in JavaScript methods.
	* Pros: Extremely lightweight and fast, with no dependencies.
	* Cons: May require more setup and boilerplate code.

**Library Analysis**

1. **`Classnames`**: As mentioned earlier, `classnames` is a popular library for working with CSS class names. It provides a convenient API for creating classes from an array of strings. The benchmark tests the performance of this library in creating a template string.
2. **`clsx`**: `CLSX` is a lightweight library that provides a concise syntax for conditionally applying CSS classes. The benchmark tests the performance of this library in creating a template string.

**JavaScript Syntax and Features**

The benchmark does not use any special JavaScript features or syntax beyond what's required to test the three options.

**Other Considerations**

When choosing between these options, consider the trade-offs between performance, readability, and maintainability. If you need a simple, lightweight solution with no dependencies, the `[] .filter(Boolean).join(" ")` approach might be the best choice. However, if you prioritize ease of use and convenience, `classnames` or `clsx` might be a better fit.

**Alternative Options**

If you're interested in exploring other options, here are a few alternatives:

1. **`DOM-Utils`**: A library that provides utility functions for working with the DOM, including string manipulation.
2. **`Template literals`**: JavaScript's built-in template literals feature can be used to create strings with placeholders and values.
3. **`String.prototype.replace()`**: Another built-in method for replacing substrings in a string.

Keep in mind that these alternatives might not provide the same level of convenience or performance as `classnames`, `clsx`, or the simple implementation using `Entries`, `filter`, `map`, and `join`.

Classnames vs CLSX vs [].filter(Boolean).join(" ") (version: 0) Benchmark.js

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

Comparing performance of: `classnames vs clsx vs Entries, filter, map, join`

Created: 4 years ago by: Guest

Go to the latest result

classnames

clsx

Entries, filter, map, join

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Classnames vs CLSX vs [].filter(Boolean).join(" ") (version: 0) Benchmark.js

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

Comparing performance of: classnames vs clsx vs Entries, filter, map, join

Created: 4 years ago by: Guest

Go to the latest result

classnames

clsx

Entries, filter, map, join

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `classnames vs clsx vs Entries, filter, map, join`