Benchmark: Classnames vs CLSX vs custom implementation 02

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>

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) {
    let 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 = classNameStack + (classNameStack && ' ') + value
                continue
            }
            case Array.isArray(value): {
                const valueFromArray = composeCssClass(...value)

                if (typeof valueFromArray !== 'undefined') {
                    classNameStack = classNameStack + (classNameStack && ' ') + valueFromArray
                }
                continue
            }
            case typeof value === "object": {
                for (const key in value) {
                    if (value[key]) {
                        classNameStack = classNameStack + (classNameStack && ' ') + key
                    }
                }
                continue
            }
        }
    }

    return classNameStack || undefined
}

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
custom implemenatation

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.5

View result in a separate tab

Test name	Executions per second
classnames	6989340.5 Ops/sec
clsx	10740466.0 Ops/sec
custom implemenatation	11603602.0 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 benchmarking scenario.

**Benchmark Overview**

The test compares three different approaches for generating CSS class names: `Classnames`, `CLSX` (also known as `clsx`), and a custom implementation. The test uses a predefined JavaScript function `composeCssClass` to generate class names from an array of values (`arr`) and an object (`obj`). The test also includes an additional string value (`str`) that is not used in the comparison.

**Options Compared**

The three options compared are:

1. **Classnames**: A library for working with class names in JavaScript.
2. **CLSX (clsx)**: Another library for working with class names in JavaScript, similar to Classnames but with a different API.
3. **Custom Implementation**: The custom implementation provided in the benchmark code, which uses a switch statement to generate class names based on the input values.

**Pros and Cons of Each Approach**

1. **Classnames**:
	* Pros: Well-maintained library with a clear and concise API. Supports various use cases, including arrays and objects.
	* Cons: May have overhead due to its library nature.
2. **CLSX (clsx)**:
	* Pros: Similar to Classnames but with a more lightweight and flexible API. Supports template literals and other advanced features.
	* Cons: May be less well-maintained than Classnames, with fewer test cases and less documentation.
3. **Custom Implementation**:
	* Pros: Lightweight and efficient, as it only uses JavaScript's built-in features.
	* Cons: Requires more manual implementation effort and may be less maintainable.

**Library Overview**

1. **Classnames**: A popular library for working with class names in JavaScript. It provides a simple and concise API for generating class names from arrays and objects.
2. **CLSX (clsx)**: Another library similar to Classnames but with a more lightweight and flexible API. It supports template literals, advanced features, and is designed for performance.

**Special JS Features/ Syntax**

None mentioned in the benchmark scenario. However, CLSX uses some advanced JavaScript features like template literals and destructuring, which may be unfamiliar to some developers.

**Other Alternatives**

For generating class names, other alternatives could include:

1. **Template literals**: Using template literals can simplify the process of concatenating strings with variables.
2. **Array.prototype.map()**: Using `map()` to generate an array of class names can be more efficient than a custom implementation.
3. **Lodash's `set` function**: Lodash provides a `set` function that can be used to create an object from an array of values.

These alternatives would require significant changes to the benchmark scenario, but they could potentially offer performance or code simplicity benefits over the custom implementation and libraries like Classnames and CLSX.

Related benchmarks:

Classnames vs CLSX vs custom implementation 02 (version: 1)

Compare CLSX vs Classnames

Comparing performance of: classnames vs clsx vs custom implemenatation

Created: 3 years ago by: Registered User

Jump to the latest result

classnames

clsx

custom implemenatation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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