- Building and shipping functional CSS
Some months ago, I took on the process of refactoring the distributed CSS library we use to build our products’ UI at TrialReach. The result of this refactoring was pretty impressive — for example, the library’s file size dropped from an already-lean 68kb down to a very respectable 34kb (file sizes quoted without compression). A big reason for this reduction in size lies in a style of CSS architecture, sometimes referred to as ‘atomic’ or ‘functional’ CSS. You might assume that with a 50% reduction in code, our CSS library would become necessarily less flexible, and thus less useful. In fact, the reality has been quite the opposite.