Benchmark: Classnames vs CLSX vs Obj-Str vs Template String vs Template String with trim

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.1/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.1.1/dist/clsx.min.js'></script>
<script src='https://unpkg.com/obj-str@1.1.0/dist/obj-str.min.js'></script>

Script Preparation code:

var condition = !!"asdf";

Tests:

classnames
let result = window.classNames('bg-red-500 mx-4 py-3', { 'style-2': condition, 'style-3': !condition })
clsx
let result = window.clsx('bg-red-500 mx-4 py-3', { 'style-2': condition, 'style-3': !condition })
Obj-Str
let result = window.objstr({'bg-red-500 mx-4 py-3': true, 'style-2': condition, 'style-3': !condition })
Template String
let result = `bg-red-500 mx-4 py-3 ${condition ? "style-2" : "style-3"}`
Template String with trim
let result = `bg-red-500 mx-4 py-3 ${condition ? "style-2" : "style-3"}`.trim()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
Obj-Str
Template String
Template String with trim

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmarking test comparing four different methods for creating class names or dynamic styles in HTML strings: Classnames, CLSX, Obj-Str, and Template Strings.

**Methods Compared**

1. **Classnames**: A library that allows you to easily create sets of CSS classes.
2. **CLSX (clsx)**: A lightweight alternative to Classnames that also creates class names or dynamic styles in HTML strings.
3. **Obj-Str**: A simple function for generating object keys as strings, used here to dynamically construct class names or style attributes.
4. **Template Strings**: A feature of modern JavaScript that allows you to embed expressions inside string literals.

**Options Compared**

* Classnames: uses the `class` keyword and library functions (`classNames`, `include`, etc.) to create class names.
	+ Pros: easy to use, intuitive API, supports various features like including/excluding classes.
	+ Cons: requires an additional library, might be overkill for simple use cases.
* CLSX (clsx): uses a single function (`clsx`) to create class names or dynamic styles in HTML strings.
	+ Pros: lightweight, simple, and easy to learn, supports some features like `&&` and `||`.
	+ Cons: limited compared to Classnames, might not be suitable for complex use cases.
* Obj-Str: uses object keys as strings to dynamically construct class names or style attributes.
	+ Pros: very lightweight, simple, and easy to understand, works well with objects.
	+ Cons: might be less intuitive than other methods, requires some knowledge of object syntax.
* Template Strings: uses a feature of modern JavaScript to embed expressions inside string literals.
	+ Pros: expressive, readable, and efficient, widely supported by browsers and engines.
	+ Cons: only available in modern browsers and JavaScript versions.

**Pros and Cons**

| Method | Pros | Cons |
| --- | --- | --- |
| Classnames | easy to use, intuitive API, supports various features | requires additional library |
| CLSX (clsx) | lightweight, simple, easy to learn, supports some features | limited compared to Classnames |
| Obj-Str | very lightweight, simple, easy to understand, works well with objects | might be less intuitive than other methods |
| Template Strings | expressive, readable, efficient, widely supported | only available in modern browsers and JavaScript versions |

**Other Considerations**

* **Libraries**: If you plan to use a library like Classnames, make sure to consider the additional overhead and potential impact on performance.
* **Browser Support**: Keep in mind that Template Strings are not supported by older browsers or versions of JavaScript. Make sure your target audience is compatible with modern standards.

**Alternatives**

If you're interested in alternative methods for creating class names or dynamic styles, consider:

* Using CSS classes instead of JavaScript libraries.
* Implementing a custom solution using pure JavaScript (without libraries).
* Exploring other libraries like `postcss` or `style-loader`.

Overall, the choice of method depends on your specific use case, performance requirements, and personal preference. This benchmark provides a useful comparison to help you decide which approach best fits your needs.

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

Browser/OS: Chrome 110 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	2276531.5 Ops/sec
clsx	3165474.5 Ops/sec
Obj-Str	3124488.2 Ops/sec
Template String	19029094.0 Ops/sec
Template String with trim	11711810.0 Ops/sec

Related benchmarks:

Classnames vs CLSX vs Obj-Str vs Template String vs Template String with trim (version: 0)

Compare Classnames vs CLSX vs Obj-Str vs Template String

Comparing performance of: classnames vs clsx vs Obj-Str vs Template String vs Template String with trim

Created: one year ago by: Guest

Jump to the latest result

classnames

clsx

Obj-Str

Template String

Template String with trim

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):