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

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"}`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
Obj-Str
Template String

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares four different approaches to conditionally apply CSS styles:

1. Classnames (using the `class` keyword with an object)
2. CLSX (using the `clsx` library)
3. Obj-Str (using the `obj-str` library)
4. Template String

**Options Compared**

The options being compared are:

* Conditionally applying CSS styles to a set of elements using different methods.
* The presence or absence of certain conditions is used to toggle the application of specific styles.

**Pros and Cons of Each Approach**

1. **Classnames**: This method uses the `class` keyword with an object to conditionally apply styles. Pros: simple, widely supported, and easy to understand. Cons: can be verbose, especially when dealing with multiple conditions.
2. **CLSX**: This library provides a concise way to conditionally apply styles using a functional programming style. Pros: concise, expressive, and well-documented. Cons: may require additional setup and learning time for developers unfamiliar with the library.
3. **Obj-Str**: This library provides a simple way to conditionally apply styles by converting objects to strings. Pros: lightweight, easy to use, and fast execution. Cons: limited documentation and community support compared to CLSX.
4. **Template String**: This method uses template literals to conditionally apply styles. Pros: concise, easy to read, and well-supported by modern browsers. Cons: may not be as efficient as other methods, especially for complex conditions.

**Library and Syntax**

1. **Classnames**: This is a built-in JavaScript feature that allows you to conditionally apply classes to elements using the `class` keyword with an object.
2. **CLSX**: A popular library that provides a concise way to conditionally apply styles using a functional programming style. The syntax is similar to React's conditional rendering, but more concise.
3. **Obj-Str**: A lightweight library that converts objects to strings, allowing for simple conditional application of styles.
4. **Template String**: A feature supported by modern browsers that allows you to embed expressions inside string literals using template literals (`${expression}`).

**Other Alternatives**

If the above approaches don't meet your needs, other alternatives might include:

* Using a CSS-in-JS solution like styled-components or emotion
* Leveraging a utility-first approach with libraries like Tailwind CSS
* Implementing custom conditionals using JavaScript functions or methods

It's worth noting that the choice of method ultimately depends on your project's specific requirements, your team's expertise, and personal preference.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Browser/OS: Chrome 113 on Windows

View result in a separate tab

Test name	Executions per second
classnames	1495318.9 Ops/sec
clsx	2071857.6 Ops/sec
Obj-Str	2148003.5 Ops/sec
Template String	11129170.0 Ops/sec

Related benchmarks:

Classnames vs CLSX vs Obj-Str vs Template String (version: 2)

Compare Classnames vs CLSX vs Obj-Str vs Template String

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

Created: 2 years ago by: Registered User

Jump to the latest result

classnames

clsx

Obj-Str

Template String

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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