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)

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 (Android 13; Mobile; rv:136.0) Gecko/136.0 Firefox/136.0

Browser/OS: Firefox Mobile 136 on Android

View result in a separate tab

Test name	Executions per second
classnames	2441603.5 Ops/sec
clsx	3211603.8 Ops/sec
Entries, filter, map, join	2814990.2 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`.

Related benchmarks:

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

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

Jump to the latest result

classnames

clsx

Entries, filter, map, join

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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