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>

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
}

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.

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