Skip to content

Instantly share code, notes, and snippets.

@dominikwilkowski
Last active July 31, 2020 02:46
Show Gist options
  • Save dominikwilkowski/b7fca5831f0a968282896eaa57369093 to your computer and use it in GitHub Desktop.
Save dominikwilkowski/b7fca5831f0a968282896eaa57369093 to your computer and use it in GitHub Desktop.
CSS Optimization

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment