Functional CSS

What is it?

it makes HTML powerful enough to define its style not just content.

It usually has tons of basic classes for typeography, spacing, color, grid systems, and more. They tend to have obvious names like .red or .hide align many use shorthand like .dn for display none.

For convincing on why this is important, read this article by John Gold. Don't just skim it, read the whole thing, every word.

Problem with CSS

originally for "style sheets" aka: you want the same content to look different depending on the theme

cascading was supposed to be awesome at styling components in complex ways. Unfortunately it accomplished that was "complex", in the bad sense, and lead to hard to debug code (where is this style coming from? How do I override it?)

CSS was created with this assumption that the style was more likely to change than the HTML. That you where more likely to retheme HTML than add a new type of UI. That's a bad bet. Rethemes happen, just not very often. HTML is not usually set in stone either.

Pros:

• speed
  • the CSS the browser loads is almost exactly the amount that it uses. Or pretty darn close.
  • your CSS files are tiny!
• your CSS is reusable and obvious
• Better design
  • it keeps a natural rythm to the page
  • easier to make responsive
  • easier for designers to make something easy to port
• scalable
  • no cascade (confusing and error prone, avoids using long names to override other styles)
  • your CSS file stops growing after a while
• more likely to be reused
  • it's easy to find patterns in other HTML and reuse it.
• faster development
• less context switching
• natural browser compatibility
• you can use it easily on plain HTML files which is great for marketing websites and prototyping
• doesn't require a build step usually because you rarely change css.
• it's flexible enough to be used across all your apps. Again less context switching
• realistic
• Takes into account the way CSS is developed
• let's you just get your JIRA ticket done by slapping on a few classes rather than appending css to the bottom of the file.
• let's you develop in the chrome debugger by changing class names and quickly seeing how it reacts. Then it's straightforward to copy it over.
• Flexible
  • makes a sort of Lodash for css.

Cons:

• "pollutes" class props of HTML with lots of names instead of just one
• you have to wrap css itself in many cases such as float: right -> float-right which provides a small level of indirection
• still pollutes the global scope with it's few selectors (all CSS is pretty much global though, css modules just generate unlikely names)
• many times have cryptic class names that you have to memorize (but once you do it's easy)

Tags: css, functional-programing

---

Backlinks:

• Why your ReasonML evangelism isn't Working (references)