Benchmark: style.setProperty vs style.removeProperty vs style.cssPropertyName

HTML Preparation code:

<div id="el">Hello world</div>

Script Preparation code:

el = document.getElementById("el")
el.style.setProperty('color', 'red')
el.style.setProperty('border', '1vmin solid red')
el.style.setProperty('padding', '0.5vmin')
el.style.setProperty('background-color', 'black')
el.style.setProperty('height', '1vh')
el.style.setProperty('width', '1vw')

Tests:

style.setProperty
el.style.setProperty('color', '') el.style.setProperty('border', '') el.style.setProperty('padding', '') el.style.setProperty('background-color', '') el.style.setProperty('height', '') el.style.setProperty('width', '')
style.removeProperty
el.style.removeProperty('color') el.style.removeProperty('border') el.style.removeProperty('padding') el.style.removeProperty('background-color') el.style.removeProperty('height') el.style.removeProperty('width')
style.cssPropertyName
el.style.color = '' el.style.border = '' el.style.padding = '' el.style.backgroundColor = '' el.style.height = '' el.style.width = ''

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style.setProperty
style.removeProperty
style.cssPropertyName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
style.setProperty	2611277.0 Ops/sec
style.removeProperty	2764541.8 Ops/sec
style.cssPropertyName	1976682.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares three different methods for resetting CSS styles on an HTML element, specifically targeting a `div` with the id of "el". The methods being compared are:

1. **Using `style.setProperty`**:
   - **Benchmark Definition**: 
     ```javascript
     el.style.setProperty('color', '')
     el.style.setProperty('border', '')
     el.style.setProperty('padding', '')
     el.style.setProperty('background-color', '')
     el.style.setProperty('height', '')
     el.style.setProperty('width', '')
     ```
   - **Test Name**: `style.setProperty`
   - **Pros**: 
     - `setProperty` is a standard way to modify CSS properties and it allows setting custom CSS properties (CSS variables).
   - **Cons**: 
     - Slightly more verbose as it requires a string representation of property names and values.

2. **Using `style.removeProperty`**:
   - **Benchmark Definition**: 
     ```javascript
     el.style.removeProperty('color')
     el.style.removeProperty('border')
     el.style.removeProperty('padding')
     el.style.removeProperty('background-color')
     el.style.removeProperty('height')
     el.style.removeProperty('width')
     ```
   - **Test Name**: `style.removeProperty`
   - **Pros**: 
     - Specifically designed to remove properties, which can be clearer semantically when the intention is to purge certain styles.
     - May be more suitable for removing properties that were previously set or inherited.
   - **Cons**: 
     - It does not support CSS variables.
     - Slightly less readable for those familiar with direct property assignment.

3. **Using direct property assignment**:
   - **Benchmark Definition**: 
     ```javascript
     el.style.color = ''
     el.style.border = ''
     el.style.padding = ''
     el.style.backgroundColor = ''
     el.style.height = ''
     el.style.width = ''
     ```
   - **Test Name**: `style.cssPropertyName`
   - **Pros**: 
     - Very straightforward and easy to read, making it intuitive for developers who have experience with DOM manipulation.
     - Generally faster for common properties as the properties are accessed directly.
   - **Cons**: 
     - Cannot manipulate custom properties or CSS variables.
     - Property names must be written in camelCase which can be inconsistent with the CSS standard (e.g., `backgroundColor` vs. `background-color`).

### Performance Results
Based on the provided benchmark results, the following execution speeds were observed:
- `style.removeProperty`: 2,764,541.75 executions per second
- `style.setProperty`: 2,611,277.00 executions per second
- `style.cssPropertyName`: 1,976,682.00 executions per second

### Other Considerations
- **Browser Compatibility**: All methods are widely supported across modern browsers, but individual implementations may exhibit slight performance variations.
- **Readability and Maintenance**: While performance might be a priority in certain cases, the choice of method should also consider the readability and maintainability of the code, especially in large codebases or teams where various developers may contribute.

### Alternatives
- Other alternatives could include third-party libraries such as jQuery, which provide additional utility for manipulating styles. Using jQuery’s `css` method allows both getting and setting the CSS properties but may come with overhead due to the library size and the additional abstraction layer.
- Additionally, CSS-in-JS libraries (like Styled Components or Emotion) allow for dynamically styled components but also involve a different paradigm beyond direct DOM manipulations.

In summary, the benchmark tests three legitimate approaches to resetting CSS properties in JavaScript, with particular performance outcomes that can guide developers in choosing the best method for their specific use case.

Related benchmarks:

style.setProperty vs style.removeProperty vs style.cssPropertyName (version: 1)

Comparing performance of: style.setProperty vs style.removeProperty vs style.cssPropertyName

Created: 3 months ago by: Registered User

Jump to the latest result

style.setProperty

style.removeProperty

style.cssPropertyName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):