JS vs inline (v3)

Revision 3 of this benchmark created on

Preparation HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .margin-\[--margin-var\] {
        	margin: var(--margin-var)
        }
        .margin-\[5px\] {
        	margin: 5px
        }
    </style>
</head>
<body>
    <div id="app"></div>
</div>
</body>
</html>

Setup

function createComponentWithCSSVariable() {
	const el = document.getElementById('app');
	el.className = 'margin-[--margin-var]'
	el.style = {'--margin-var': '5px'}
}
        

function createComponentWithAtomicClass() {
	document.getElementById('app').className = 'margin-[5px]'
}

Test runner

Ready to run.

Testing in
TestOps/sec
Inline
createComponentWithCSSVariable();
ready
JS
createComponentWithAtomicClass();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.