JSFiddle - React, Tailwind, and code Playground

Verbose div creation vs just plain CSS.

by Travis Almand

HTML

<div class="two"></div>

CSS

.two {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

JavaScript

const main = () => {
	create_div();
  style_div();
};

const create_div = () => {
	const body = document.body;
  
 body.insertAdjacentHTML('afterbegin', '<div class="one"></div>');
};

const style_div = () => {
	const div = document.querySelector('.one');
  const height = style_div_height();
  const width = style_div_width();
	const top = style_div_top();
  const right = style_div_right();
  const bottom = style_div_bottom();
  const left = style_div_left();
  
  div.style.cssText = `${height} ${width} ${top} ${right} ${bottom} ${left}`;
};

const style_div_height = () => {
	return 'height: 100px;';
};
const style_div_width = () => {
	return 'width: 100px;';
};
const style_div_top = () => {
	return 'border-top: 1px solid black;';
};
const style_div_right = () => {
	return 'border-right: 1px solid black;';
};
const style_div_bottom = () => {
	return 'border-bottom: 1px solid black;';
};
const style_div_left = () => {
	return 'border-left: 1px solid black;';
}

main();