Benchmark: Classnames vs CLSX vs composeCssClass 03

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 className = ''

    for (let valueIndex = 0, valuesLength = values.length; valueIndex < valuesLength; valueIndex += 1) {
        const value = values[valueIndex]

        switch (true) {
            case !value: {
                continue
            }
            case typeof value === 'string':
            case typeof value === 'number': {

                className = className + (className && ' ') + value
                continue
            }
            case Array.isArray(value): {
                const valueFromArray = composeCssClass(...value)

                if (valueFromArray) {
                    className = className + (className && ' ') + valueFromArray
                }
                continue
            }
            case typeof value === 'object': {
                for (const key in value) {
                    if (value[key]) {
                        className = className + (className && ' ') + key
                    }
                }
                continue
            }
        }
    }

    return className || 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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript benchmark that compares three different approaches for combining CSS class names: `classnames`, `clsx`, and a custom implementation.

**What is tested**

The benchmark tests the performance of each approach in creating a string of concatenated CSS class names from an object (`obj`) and an array (`arr`). The custom implementation (`composeCssClass`) uses a recursive approach to handle nested objects and arrays.

**Options compared**

1. **classnames**: A library that provides a simple way to combine CSS class names from an object.
2. **clsx**: Another popular library for combining CSS class names, which also provides additional features like dynamic class name generation and support for CSS classes as strings.
3. **Custom implementation (`composeCssClass`)**: A custom JavaScript function that uses recursion to handle nested objects and arrays.

**Pros and Cons of each approach**

1. **classnames**:
	* Pros: Simple, lightweight, and easy to use.
	* Cons: May not be optimized for performance, especially with large input data.
2. **clsx**:
	* Pros: Optimized for performance, supports dynamic class name generation, and has additional features like CSS classes as strings.
	* Cons: Slightly heavier than `classnames`, requires more dependencies (CSSOM and CSSParser).
3. **Custom implementation (`composeCssClass`)**:
	* Pros: Can be highly optimized for specific use cases, provides a clear understanding of the underlying logic.
	* Cons: More complex to implement, requires manual handling of nested objects and arrays.

**Library analysis**

1. **classnames**: A popular library for combining CSS class names. It uses a simple iterative approach to concatenate class names from an object. While lightweight, it may not be optimized for performance with large input data.
2. **clsx**: Another well-known library that provides additional features like dynamic class name generation and support for CSS classes as strings. Its optimization techniques make it suitable for larger datasets.

**Special JS feature or syntax**

* **ES6 template literals**: Used in the `composeCssClass` implementation to concatenate class names.
* **CSSOM (CSS Object Model)**: Used by `clsx` to parse CSS classes and handle them efficiently.

**Other alternatives**

* Other CSS class name combination libraries, such as `lodash.classNames`, `react-classnames`, or `cssclass`.
* Manual string concatenation without using any libraries, which can be error-prone and less efficient.
* Other recursive approaches, like using recursion with a stack data structure (not shown in the custom implementation).

**Benchmark results**

The latest benchmark results show that:

* **clsx** performs best, followed by `classnames`, and then the custom implementation (`composeCssClass`).
* The performance difference between `clsx` and `classnames` is relatively small, but `clsx` wins due to its optimization techniques.
* The custom implementation (`composeCssClass`) has a lower execution rate compared to `clsx` and `classnames`.

Keep in mind that the benchmark results may vary depending on the input data size, device platform, and other factors.

Related benchmarks:

Classnames vs CLSX vs composeCssClass 03 (version: 0)

Compare CLSX vs Classnames vs composeCssClass

Comparing performance of: classnames vs clsx vs custom implemenatation

Created: 3 years ago by: Guest

Jump to the latest result

classnames

clsx

custom implemenatation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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