Skip to content

Instantly share code, notes, and snippets.

@chriseppstein chriseppstein/button.block.css Secret
Last active May 4, 2018

Embed
What would you like to do?
/* HTML + CSS: 1000 bytes (373 bytes compressed)
<link title="button" rel="block stylesheet" src="button.block.css">
<a class="button" state:size="small">button 1</a>
<a class="button" state:size="large">button 2</a>
<a class="button" state:inverse><img class="button.icon" state:animate></a>
<a class="button state:size="large"><img class="button.icon" state:animate></a>
*/
:scope {
background-color: #ed2651;
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: white;
height: 24px;
line-height: 24px;
overflow: hidden;
padding: 16px;
}
:scope[state|inverse] {
background-color: white;
color: #ed2651;
}
:scope[state|size=small] {
height: 16px;
line-height: 16px;
padding: 8px;
}
:scope[state|size=large] {
height: 24px;
line-height: 24px;
padding: 16px;
}
.icon {
height: 16px;
margin-right: 8px;
overflow: hidden;
width: 16px;
}
:scope[state|size=large] .icon {
height: 24px;
width: 24px;
margin-right: 12px;
}
.icon[state|animate] {
animation: 3s ease-in 1s icon-animation;
}
/* HTML + CSS: 998 bytes (323 bytes compressed)
<a class="button button--size-small">button</a>
<a class="button button--size-large">button</a>
<a class="button button--inverse"><img class="button__icon button__icon--animate"></a>
<a class="button button--size-large"><img class="button__icon button__icon--animate"></a>
*/
.button {
background-color: #ed2651;
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: white;
height: 24px;
line-height: 24px;
overflow: hidden;
padding: 16px;
}
.button--inverse {
background-color: white;
color: #ed2651;
}
.button--size-small {
height: 16px;
line-height: 16px;
padding: 8px;
}
.button--size-large {
height: 24px;
line-height: 24px;
padding: 16px;
}
.button__icon {
height: 16px;
margin-right: 8px;
overflow: hidden;
width: 16px;
}
.button--size-large .button__icon {
height: 24px;
width: 24px;
margin-right: 12px;
}
.button__icon--animate {
animation: 3s ease-in 1s icon-animation;
}
/* HTML + CSS: 645 bytes (300 bytes compressed)
<a class="j f g h i m l">button</a>
<a class="j f g h i o">button</a>
<a class="j f g h i k"><img class="n l h p"></a>
<a class="j f g h i o"><img class="n l h p"></a>
*/
.f { height: 24px; }
.g { line-height: 24px; }
.h { overflow: hidden; }
.i { padding: 16px; }
.j {
background-color: #ed2651;
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: white;
}
.k { background-color: white; color: #ed2651; }
.l { height: 16px; }
.m { line-height: 16px; padding: 8px; }
.n { margin-right: 8px; width: 16px; }
.o .n {
height: 24px;
width: 24px;
margin-right: 12px;
}
.p {
animation: 3s ease-in 1s icon-animation;
}
@montogeek

This comment has been minimized.

Copy link

montogeek commented Apr 25, 2018

It is possible to get truly atomic classes?
Like tachyons.io?

Edit:
Or you and your team discovered that

.j {
  background-color: #ed2651;
  border: 0;
  border-radius: 2px;
  box-sizing: border-box;
  color: white;
}

Is more performant than

.j {
  background-color: #ed2651;
}
.t {
  border: 0;
}
.y {
 border-radius: 2px;
}
.k {
  box-sizing: border-box;
}
.f {
   color: white;
}
@chriseppstein

This comment has been minimized.

Copy link
Owner Author

chriseppstein commented Apr 25, 2018

@montogeek the optimizer will create classes for declarations that are repeated. If declarations are always used in conjunction then a single class is more efficient in terms of memory and bytes over the wire.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.