class: center, middle # Functional CSS ## Soothing your CSS pain ??? Soap box. Web in a pandemic. Website sizes over time are off the charts. Today, websites same size as Doom. --- class: center, middle <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Two CSS properties walk into a bar.<br><br>A barstool in a completely different bar falls over.</p>— Thomas Fuchs (@thomasfuchs) <a href="https://twitter.com/thomasfuchs/status/493790680397803521">July 28, 2014</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ??? They say you should open with a joke. But is this funny or concerning? --- class: center middle # Monolithic CSS is in trouble ??? What is monolithic CSS --- # Unbound payload size ??? Problem #1. Unbound payload size. CSS Stats.com is a great website to determine - stats about websites. I gathered the across-the-wire payload size for some popular sites CSS. -- * AirBnB - 366kb * Stack Overflow - 600kb * Twitter - 643kb * Medium - 674kb * Pinterest - 1180kb * Tachyons - 40kb ??? How much of this CSS is duplicated? --- # Cascading failures .center[] ??? Problem #2. Cascading failures. Cascading nature can cause unexpected issues if one is not careful. Some frameworks created to help solve this - BEM, OOCSS, SMACSS. --- # Functional CSS can help * Small immutable classes assembled into a larger component * Bring the presentation back into the HTML * Make the visual connection as you work * Stop context switching * Keep your CSS payload size constant * Use Tachyons --- class: center middle # Tachyons --- # Tachyons Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. * Lightweight - 14kb min/gzip * Mobile first * Accessible colour pallette * Type scale already figured out * Website: tachyons.io --- class: center middle # Demo