Functional CSS
Learn about functional CSS in our Rails application.
We'll cover the following...
Functional CSS (sometimes called atomic CSS) is a strategy where we have a largely static set of small, single-purpose, highly-presentational classes that we combine to achieve a certain look. For example, there might be a class named fwb that does nothing but set font-weight to bold, and another called ttu, which sets text-transform to uppercase. To style some content in bold uppercase, we’d use class="ttu fwb".
It’s called functional in a nod to mathematical functions, which produce the same output for the given input. Classes in a functional CSS system have completely predictable and unambiguous behavior. They can feel like short-hand for using CSS directly in our markup. Our widget title component would look like so:
<h1 class="fwb ttu">Stembolt</h1><h2 class="normal courier">123.45</h2>
These terse classes are based on the ...