Simple comparison between Atomic CSS vs 'standard' CSS. Might not be representative of larger files.
| file | raw | gzip |
|---|---|---|
| with-atomic.css | 576b | 325b |
| with-atomic.html | 1183b | 254b |
| without-atomic.css | 1676b | 324b |
| without-atomic.html | 714b | 199b |
| raw | gzip | |
|---|---|---|
| with-atomic | 1.7kb | 0.579kb |
| without-atomic | 2.3kb | 0.523kb |
| .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; | |
| } |
| <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> |
| 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); | |
| } |
| <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> |