Functional CSS
Explore functional CSS principles and how using small, single-purpose classes can streamline styling in Rails applications. Learn to apply utility libraries effectively, understand benefits like predictability and maintainability, and recognize limitations for complex UIs.
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 ...