README.md

Simple comparison between Atomic CSS vs 'standard' CSS. Might not be representative of larger files.

results

file	raw	gzip
with-atomic.css	576b	325b
with-atomic.html	1183b	254b
without-atomic.css	1676b	324b
without-atomic.html	714b	199b

total

	raw	gzip
with-atomic	1.7kb	0.579kb
without-atomic	2.3kb	0.523kb

with-atomic.css

.Bgc\(\#0280ae\.5\) {
  background-color: rgba(2,128,174,.5);
}
.Bgc\(\#0280ae\) {
  background-color: #0280ae;
}
.D\(tb\) {
  display: table;
}
.D\(tbc\) {
  display: table-cell;
}
.D\(f\) {
  display: flex;
}
.Flxg\(1\) {
  flex-grow: 1;
}
.Fl\(start\) {
  float: left;
}
.H\(90px\) {
  height: 90px;
}
.W\(1\/2\), .W\(50\%\) {
  width: 50%;
}
.W\(100\%\), .Row {
  width: 100%;
}
.IbBox, .Row {
  display: inline-block;
  zoom: 1;
  vertical-align: top;
}
.IbBox {
  *display: inline;
}
.Row {
  clear: both;
  box-sizing: border-box;
  *display: block;
  *width: auto;
}

with-atomic.html

<link href="with-atomic.css" rel="stylesheet" />

<div class="Row">
    <div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)"></div>
    <div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(tb) W(100%)" role="presentation">
    <div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
    <div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
   <div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div><!--
--><div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
<div class="D(f)">
    <div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
    <div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>

<div class="Row">
    <div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)"></div>
    <div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(tb) W(100%)" role="presentation">
    <div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
    <div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
   <div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div><!--
--><div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
<div class="D(f)">
    <div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
    <div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>

without-atomic.css

body {
    box-sizing: border-box;
}

.row {
    clear: both;
    width: 100%;
}

.block {
    width: 50%;
    height: 90px;
    float: left;
    background-color: rgba(2,128,174,.5);
}

.block + .block {
    background-color: rgba(2,128,174,1);
}


.row2 {
    display: table;
    width: 100%;
}

.block2 {
    height: 90px;
    display: table-cell;
    background-color: rgba(2,128,174,1);
}

.block2 + .block2 {
    background-color: rgba(2,128,174,.5);
}

.block3 {
    width: 50%;
    height: 90px;
    display: inline-block;
    background-color: rgba(2,128,174,.5);
}

.block3 + .block3 {
    background-color: rgba(2,128,174,1);
}

.row4 {
    display: flex;
}

.block4 {
    width: 50%;
    height: 90px;
    display: inline-block;
    background-color: rgba(2,128,174,1);
}

.block4 + .block4 {
    background-color: rgba(2,128,174,.5);
}

.srow {
    clear: both;
    width: 100%;
}

.sblock {
    width: 50%;
    height: 90px;
    float: left;
    background-color: rgba(2,128,174,.5);
}

.sblock + .sblock {
    background-color: rgba(2,128,174,1);
}


.srow2 {
    display: table;
    width: 100%;
}

.sblock2 {
    height: 90px;
    display: table-cell;
    background-color: rgba(2,128,174,1);
}

.sblock2 + .sblock2 {
    background-color: rgba(2,128,174,.5);
}

.sblock3 {
    width: 50%;
    height: 90px;
    display: inline-block;
    background-color: rgba(2,128,174,.5);
}

.sblock3 + .sblock3 {
    background-color: rgba(2,128,174,1);
}

.srow4 {
    display: flex;
}

.sblock4 {
    width: 50%;
    height: 90px;
    display: inline-block;
    background-color: rgba(2,128,174,1);
}

.sblock4 + .sblock4 {
    background-color: rgba(2,128,174,.5);
}

without-atomic.html

<link href="without-atomic.css" rel="stylesheet" />

<div class="row">
    <div class="block"></div>
    <div class="block"></div>
</div>
<div class="row2">
    <div class="block2"></div>
    <div class="block2"></div>
</div>
   <div class="block3"></div><!--
--><div class="block3"></div>
<div class="row4">
    <div class="block4"></div>
    <div class="block4"></div>
</div>

<div class="srow">
    <div class="sblock"></div>
    <div class="sblock"></div>
</div>
<div class="srow2">
    <div class="sblock2"></div>
    <div class="sblock2"></div>
</div>
   <div class="sblock3"></div><!--
--><div class="sblock3"></div>
<div class="srow4">
    <div class="sblock4"></div>
    <div class="sblock4"></div>
</div>