Benchmark: Classnames vs CLSX vs custom implementation 01

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.2.1/dist/clsx.min.js'></script>

​x
 
​
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.2.1/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']

function composeCssClass(...values) {
    const classNameStack = []

    for (let i=0; i<values.length; i+=1) {
      	const value = values[i]
      
        switch (true) {
            case !value: {
                continue
            }
            case typeof value === "string":
          	case typeof value === "number": {
                classNameStack.push(value)
                continue
            }
            case Array.isArray(value): {
                const valueFromArray = composeCssClass(...value)

                if (typeof valueFromArray !== 'undefined') {
                    classNameStack.push(valueFromArray)
                }
                continue
            }
            case typeof value === "object": {
                for (const key in value) {
                    if (value[key]) {
                        classNameStack.push(key)
                    }
                }
                continue
            }
        }
    }

    return classNameStack.length > 0 ? classNameStack.join(" ") : undefined
}

 
var str = 'style';var obj = {    'style-2': true,    'style-3': false,    'style-4': true,}var arr = ['style-5', 'style-6']​function composeCssClass(...values) {    const classNameStack = []​    for (let i=0; i<values.length; i+=1) {        const value = values[i]              switch (true) {            case !value: {                continue            }            case typeof value === "string":            case typeof value === "number": {                classNameStack.push(value)                continue            }            case Array.isArray(value): {                const valueFromArray = composeCssClass(...value)​                if (typeof valueFromArray !== 'undefined') {                    classNameStack.push(valueFromArray)                }                continue            }            case typeof value === "object": {                for (const key in value) {                    if (value[key]) {                        classNameStack.push(key)                    }                }                continue            }        }    }​    return classNameStack.length > 0 ? classNameStack.join(" ") : undefined}

Tests:

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

clsx

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

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

custom implemenatation
let result = composeCssClass(str, obj, arr, 'test classname')
let result = composeCssClass(str, obj, arr, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
classnames
clsx
custom implemenatation

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/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	2705606.2 Ops/sec
clsx	3971421.2 Ops/sec
custom implemenatation	2093373.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Let's break down what's being tested in the provided JSON.

Benchmark Definition

The benchmark is comparing three approaches to generate a CSS class string from an array of values:

classnames: A library function that takes multiple arguments and returns a concatenated string of classes.
clsx: Another library function that serves a similar purpose, but with some differences in implementation.
A custom implementation (composeCssClass) written by the benchmark creator.

Options Compared

The three options are compared in terms of their performance (number of executions per second) across different browsers and devices.

Pros and Cons of Each Approach

classnames:
- Pros: Well-maintained, widely used library with a simple API.
- Cons: May have additional dependencies or overhead compared to the custom implementation.
clsx:
- Pros: Similar performance characteristics to classnames, but with some optimizations and features (e.g., support for JSX-like syntax).
- Cons: Some users may prefer the simplicity of classnames.
Custom Implementation (composeCssClass):
- Pros: Tailored to the specific use case, potentially optimized for performance.
- Cons: Requires more maintenance effort compared to using established libraries.

Library and Its Purpose

classnames: A small library that provides a simple way to concatenate class names from multiple sources. It's designed to be easy to use and performant.
clsx: Another lightweight library that extends the capabilities of classnames with additional features, such as support for JSX-like syntax and better performance in certain scenarios.

Special JS Feature or Syntax

None mentioned in this benchmark.

Benchmark Preparation Code

The preparation code sets up the test case by defining:

A string variable str
An object variable obj
An array variable arr

These variables are then passed to each of the three functions being compared, which generate a CSS class string from them.

Other Alternatives

If you're interested in exploring alternative libraries or approaches for generating CSS class strings, some options include:

Lodash's chain method
Other library functions like css-classify or class-join
Custom implementations with optimized algorithms for performance

Keep in mind that each option has its pros and cons, and the choice ultimately depends on your specific use case, project requirements, and personal preference.

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON.

**Benchmark Definition**

The benchmark is comparing three approaches to generate a CSS class string from an array of values:

1. `classnames`: A library function that takes multiple arguments and returns a concatenated string of classes.
2. `clsx`: Another library function that serves a similar purpose, but with some differences in implementation.
3. A custom implementation (`composeCssClass`) written by the benchmark creator.

**Options Compared**

The three options are compared in terms of their performance (number of executions per second) across different browsers and devices.

**Pros and Cons of Each Approach**

1. `classnames`:
	* Pros: Well-maintained, widely used library with a simple API.
	* Cons: May have additional dependencies or overhead compared to the custom implementation.
2. `clsx`:
	* Pros: Similar performance characteristics to `classnames`, but with some optimizations and features (e.g., support for JSX-like syntax).
	* Cons: Some users may prefer the simplicity of `classnames`.
3. Custom Implementation (`composeCssClass`):
	* Pros: Tailored to the specific use case, potentially optimized for performance.
	* Cons: Requires more maintenance effort compared to using established libraries.

**Library and Its Purpose**

1. `classnames`: A small library that provides a simple way to concatenate class names from multiple sources. It's designed to be easy to use and performant.
2. `clsx`: Another lightweight library that extends the capabilities of `classnames` with additional features, such as support for JSX-like syntax and better performance in certain scenarios.

**Special JS Feature or Syntax**

None mentioned in this benchmark.

**Benchmark Preparation Code**

The preparation code sets up the test case by defining:

* A string variable `str`
* An object variable `obj`
* An array variable `arr`

These variables are then passed to each of the three functions being compared, which generate a CSS class string from them.

**Other Alternatives**

If you're interested in exploring alternative libraries or approaches for generating CSS class strings, some options include:

1. Lodash's `chain` method
2. Other library functions like `css-classify` or `class-join`
3. Custom implementations with optimized algorithms for performance

Keep in mind that each option has its pros and cons, and the choice ultimately depends on your specific use case, project requirements, and personal preference.

Related benchmarks:

Classnames vs CLSX vs custom implementation 01 (version: 0)

Compare CLSX vs Classnames

Comparing performance of: classnames vs clsx vs custom implemenatation

Created: one year ago by: Guest

Jump to the latest result

classnames