Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
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>
Run tests (3)
Previous results
Fork
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):
**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:
_.difference vs Set 2
test array filter vs object destructure
test array filter vs object destructure deux
Array.prototype.slice vs For i loop
Switch/case vs indexOf
Comments
Confirm delete:
Do you really want to delete benchmark?