On Functional CSS

As my career takes a big shift from being only myself to a team of 20+ I’ve become more aware of the importance of best practices and scalability with regards to web design and development. This post is a quick discovery session on functional CSS and why it’s changing the way I author code.

CSS at its core is a language that paints the web. We can do some fantastic things with CSS that many years prior were never before possible. Everything from inline styles to abstracting all of our styles into an external stylesheet seemed like huge improvements not 10 years ago.

Today, we are animating with CSS, defining abstract grids, and even creating full-fledged illustrations. We can create variables and use preprocessing technologies like Sass or Less to otherwise write object-oriented style code.

The question that still has yet to be completely solved is How does CSS scale?

A long time (and still very common) approach with CSS is the seperation of concerns philosophy. This path leads us to only include the necessary markup and content in our HTML and leaves the rest to be styled by CSS.

This would otherwise look like this:

The class name intro-headline describes the content at hand and then hooks into the CSS style.

This is still a way I used to like to write CSS. Although it’s a bit less reusable, I can quickly scan and understand what it is my CSS and HTML are accomplishing together. The problem here is that our CSS now absolutely depends on our HTML.

In the video, I shared an author bio card example as shown below. This takes the seperation of concerns idea and applies it to a realistic example.

Check out the code pen below for a full preview:

With this HTML and CSS I can now assume an element with the class of author-bio will inherit the card-like styles I’m after. It made sense to me to write this way but it always still felt a little fuzzy. I would debate with myself on how often I could/should reuse this author-bio class in my code. A lot of styles are being repeated that could otherwise be substracted into more reusable classes that do one thing.

Jon Gold of Airbnb kicked off my immediate interest in functional CSS. At first, it feels dirty writing in such a way but you begin to see why it works well in practice. My advice to you is to build something real with it and see how it feels. At first, you’ll likely hate it like I did because it resembles writing inline styles but I think the thing you’ll love is the fact that there doesn’t need to be a massive amount of CSS in your arsenal to create something great.

Having a codebase already in tact also makes for a thrilling use case for functional CSS. Imagine being able to delete 500+ lines of CSS and rather use just a few more class names in your HTML.

The point here is that these classes can be used virtually anywhere to build anything. Only use what you need and get rid of the rest. Tachyons, for example, comes in many flavors. You can use them all by simply linking to a stylesheet or import only the node modules you know you’ll be using.

While the class names aren’t immediately descriptive you learn to understand what it is they do an how you can combine them to build great UI.

The issues with this approach

The perks of this approach

Functional CSS isn’t something you just go and begin writing without some growing pains. If you work alone or in a small group functional CSS might not be a great candidate for you. The concept was given birth to those who work in a team setting where multiple people need to be able to understand what’s happening site or app-wide.

With all of that said I invite you to do some of your own research to see how functional CSS could make an impact on your own design and development workflow.

Related posts:

Personal injury lawsuits can be filed when a person has received an injury because of the unreasonable actions of another. Depending on what type of personal injury case you are pursuing, the injury…

Greetings! I am a retired paralegal. Approximately two years ago a friend came to me with a letter similar to this one. He asked me to verify the fact this letter was legal. I told him I would review…

A couple of months ago, I created and ran a 4-day boot camp in my Facebook Group, Putting Your Whole Heart Forward. Though it was only attended by a few people (the group has yet to take off so it’s…