Benchmark: another classnames vs clsx

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js" integrity="sha512-GqhSAi+WYQlHmNWiE4TQsVa7HVKctQMdgUMA+1RogjxOPdv9Kj59/no5BEvJgpvuMTYw2JRQu/szumfVXdowag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://unpkg.com/clsx@2.0.0/dist/clsx.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></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
const result = window.classNames(str, obj, arr, 'test classname')
clsx
const 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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Windows

View result in a separate tab

Test name	Executions per second
classnames	1971250.0 Ops/sec
clsx	3105519.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark consists of two test cases:

1. `classnames`
2. `clsx`

Both tests use the same JavaScript variables: `str`, `obj`, and `arr`. The purpose of these variables is not explicitly stated, but based on their values, it appears that they are being used to generate a set of CSS classes.

* `str` contains a single string value: `'style'`
* `obj` is an object with three properties:
	+ `style-2`: `true`
	+ `style-3`: `false`
	+ `style-4`: `true`
* `arr` is an array of two strings: `['style-5', 'style-6']`

The benchmark prepares a HTML page with two external JavaScript files:

1. `classnames`: A library for working with class names in CSS.
2. `clsx`: A utility function for working with classes.

**Library: Classnames**

Classnames is a popular JavaScript library that provides a simple and flexible way to work with class names in CSS. It allows you to combine multiple class names into a single string, separated by spaces or other delimiters.

In the benchmark, `classnames` is used to generate a class name string from the `str`, `obj`, and `arr` variables.

**Library: clsx**

clsx is another utility function for working with classes. It provides similar functionality to classnames but with some differences in syntax and behavior.

In the benchmark, `clsx` is used to generate a class name string from the same `str`, `obj`, and `arr` variables.

**Options Compared**

The two test cases compare the performance of `classnames` and `clsx` when generating class name strings. The options being compared are:

* String delimiters: Classnames uses spaces, while clsx uses a more flexible syntax with multiple delimiters (e.g., `-`, `_`, `+`, etc.).
* Functionality: Both libraries provide similar functionality but with different approaches.

**Pros and Cons**

Here's a brief summary of the pros and cons of each library:

* Classnames:
	+ Pros:
		- Simple and easy to use
		- Fast and efficient
	+ Cons:
		- Limited flexibility in string delimiters
* clsx:
	+ Pros:
		- More flexible syntax for string delimiters
		- Supports multiple delimiters (e.g., `-`, `_`, `+`)
	+ Cons:
		- Steeper learning curve due to more complex syntax

**Special JavaScript Feature:**

There is no special JavaScript feature or syntax being tested in this benchmark. The focus is solely on comparing the performance of two libraries.

**Alternatives**

Other alternatives for working with class names in CSS include:

* `css-classifier`: A lightweight library that provides a simple and flexible way to work with class names.
* `class-names`: Another popular JavaScript library for working with class names.
* Custom implementations using plain JavaScript or other libraries.

These alternatives may offer different trade-offs in terms of performance, flexibility, and complexity, but they can provide similar functionality to classnames and clsx.

Related benchmarks:

another classnames vs clsx (version: 0)

fork of https://www.measurethat.net/Benchmarks/Show/7642/2/classnames-vs-clsx-vs-alternatives

Comparing performance of: classnames vs clsx

Created: 2 years ago by: Registered User

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