Benchmark: Classnames vs CLSX vs templateLiterals

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')
My attempt using templateLiterals
const classname = (...args) => { let joined = ""; args.forEach((arg) => { if (!arg || typeof arg === 'boolean') { return; } if (typeof arg === "string") { joined += ` ${arg} `; } else if (typeof arg === "object") { if (arg?.join) { joined += arg.filter((v) => !!v).join(" "); } else { const keys = Object.keys(arg); keys.forEach(key => { if(!!arg[key]){ joined += ` ${key} ` } }) } } }); return joined; }; let result = classname(str, obj, arr, 'test classname')

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

clsx

3.9M/s

My attempt using templateLiterals

3.2M/s

classnames

2.9M/s

Fastest: clsx (1.4x faster)

View exact numbers

✓ clsx: 3,938,450 ops/sec
• My attempt using templateLiterals: 3,185,324 ops/sec
• classnames: 2,897,538 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
My attempt using templateLiterals

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

clsx

12.1M/s

My attempt using templateLiterals

6.2M/s

classnames

5.6M/s

View exact numbers

Test name	Executions per second
✓ clsx	12,054,882 Ops/sec
My attempt using templateLiterals	6,177,112 Ops/sec
classnames	5,615,425 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial in web development, and this benchmark helps compare three popular methods for achieving class name generation: Classnames, CLSX, and template literals.

**Overview of the options**

1. **Classnames**: This library provides a simple way to generate class names by joining an array of values with a separator. It's designed to work with both strings and objects.
2. **CLSX (Class Names)**: A lightweight alternative to Classnames, CLSX is similar but uses a more minimalist approach with fewer dependencies.
3. **Template Literals**: This method leverages JavaScript's template literals feature to concatenate values into a single string.

**Pros and Cons of each approach**

1. **Classnames**:
	* Pros: Easy to use, fast, and well-maintained.
	* Cons: Dependent on external library (Classnames.js), might have performance overhead due to dependency resolution.
2. **CLSX**:
	* Pros: Lightweight, minimalistic, and easy to understand.
	* Cons: Fewer features compared to Classnames, might require more manual configuration.
3. **Template Literals**:
	* Pros: Native JavaScript support, no external dependencies, and potentially faster execution.
	* Cons: Requires understanding of template literals syntax, might have performance issues if not used correctly.

**Library descriptions**

1. **Classnames**: A popular JavaScript library for generating class names. It's designed to work with both strings and objects and provides a simple API for joining values with a separator.
2. **CLSX (Class Names)**: A lightweight alternative to Classnames, CLSX is a minimalist library that provides a basic implementation of class name generation.

**Special JS features**

Template literals use the `template` function and template string syntax (`${value}`) to concatenate values into a single string. This feature allows for more flexibility in generating class names, but also introduces additional complexity if not used correctly.

**Benchmark interpretation**

The benchmark results show that:

* **CLSX** is the fastest approach, followed closely by **Classnames**, and then **Template Literals**.
* The performance difference between CLSX and Classnames is relatively small, indicating that both libraries are optimized for class name generation.
* Template literals, while not as fast as the other two approaches, still offer a competitive performance.

**Alternatives**

If you're looking for alternative solutions:

1. **CSS Classes**: Instead of generating class names programmatically, consider using CSS classes directly in your HTML structure.
2. **Other libraries**: Other libraries like `classnames` alternatives (e.g., `css-join`) or custom implementations might be worth exploring for specific use cases.

In conclusion, when it comes to generating class names, Classnames and CLSX offer fast and reliable solutions with minimal dependencies. Template literals, while not as efficient, provide a convenient way to concatenate values into a single string.

Classnames vs CLSX vs templateLiterals (version: 0)

Compare CLSX vs Classnames vs templateLiterals

Comparing performance of: `classnames vs clsx vs My attempt using templateLiterals`

Created: 5 years ago by: Guest

Go to the latest result

classnames

clsx

My attempt using templateLiterals

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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 templateLiterals (version: 0)

Compare CLSX vs Classnames vs templateLiterals

Comparing performance of: classnames vs clsx vs My attempt using templateLiterals

Created: 5 years ago by: Guest

Go to the latest result

classnames

clsx

My attempt using templateLiterals

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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 My attempt using templateLiterals`