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')

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: 11 months 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

Test name	Executions per second
classnames	5615425.0 Ops/sec
clsx	12054882.0 Ops/sec
My attempt using templateLiterals	6177112.0 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.

Related benchmarks:

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

Jump to the latest result

classnames

clsx

My attempt using templateLiterals

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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