CSS Optimization

README.md

Case 1

This seems super easy and should be simple... (Famous last words)

<div class="a b"></div>

.a {
	color: blue;
	background: rebeccapurple;
}
.b {
	color: red;
}

(68 char)

Optimization

.a {
	background: rebeccapurple;
}
.b {
	color: red;
}

(54 char)

---

Case 2

This is the most interesting case as it relates to CSS-in-JS and I think could be most impactful.

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

.a {
	color: red;
	background: rebeccapurple;
	margin: 0;
}
.b {
	color: red;
	background: rebeccapurple;
	margin: 1rem;
}
.c {
	color: red;
	background: rebeccapurple;
	padding: 1px;
}

(185 char)

Optimization

<div class="a x"></div>
<div class="b x"></div>
<div class="c x"></div>

.x {
	color: red;
	background: rebeccapurple;
}
.a {
	margin: 0;
}
.b {
	margin: 1rem;
}
.c {
	padding: 1px;
}

(110 char + 6 HTML char)