Benchmark: Classnames vs CLSX

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.0/dist/clsx.min.js'></script>

Script Preparation code:

var str = 'style';
var obj = {
 	 'style-2': true,
  	 'style-3': false,
 	 'style-4': true,
}
var arr = ['style-5', 'style-6']

Tests:

classnames
let result = window.classNames(str, obj, arr, 'test classname')
clsx
let result = window.clsx(str, obj, arr, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 137 on Android

View result in a separate tab

Test name	Executions per second
classnames	1691664.8 Ops/sec
clsx	3453469.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 explanation of the provided JSON benchmark for comparing CLSX (Classnames) and Classnames.

**What is being tested?**

The benchmark tests two JavaScript libraries: Classnames and CLSX (Classname Extensions). Both libraries provide a way to dynamically generate class names based on object properties. The test case uses these libraries to concatenate strings with an array of values, similar to the example code provided in the Benchmark Definition JSON.

**Options compared:**

Two approaches are being compared:

1. **Classnames**: This library provides a function called `classNames` that takes an array of values and concatenates them with other strings.
2. **CLSX (Classname Extensions)**: This library provides a function called `clsx` that also takes an array of values and concatenates them with other strings.

**Pros and Cons:**

**Classnames:**

Pros:

* Well-established and widely used library
* Simple and intuitive API

Cons:

* May not be optimized for performance

**CLSX (Classname Extensions):**

Pros:

* Optimized for performance, potentially faster than Classnames
* Provides additional features, such as support for dynamic class names

Cons:

* Less well-known and established compared to Classnames
* More complex API

**Other considerations:**

The benchmark also considers the following factors:

* **JavaScript version**: The test case uses a specific JavaScript version (not specified in the provided JSON), which may affect the performance of the libraries.
* **Browser and device platform**: The test case runs on Firefox 130, running on Windows Desktop. This affects the results due to browser-specific optimizations and hardware differences.

**Library description:**

Both Classnames and CLSX are used as standalone libraries, providing a simple way to dynamically generate class names based on object properties. They are designed to be fast and efficient, making them suitable for use in web development applications where performance is critical.

However, since neither of the two options requires special JavaScript features or syntax beyond what's standard, I can stop there without further explanation.

**Alternative alternatives:**

If you're looking for alternative libraries that provide similar functionality, some popular options include:

* **CSS Class List**: A W3C standard that provides a way to dynamically generate class names.
* **Sass**: A CSS preprocessor that allows for more expressive and efficient class naming.
* **PostCSS**: A tool that can be used to extend or modify the CSS syntax, including class naming.

However, these alternatives may not provide the exact same API as Classnames and CLSX, so it's essential to evaluate their performance, features, and complexity before choosing an alternative.

Related benchmarks:

Classnames vs CLSX (version: 0)

Compare CLSX vs Classnames

Comparing performance of: classnames vs clsx

Created: 5 years ago by: Guest

Jump to the latest result

classnames

clsx

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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