Embracing Functional CSS: Have we moved on?

It’s fair to say that functional CSS has been gaining traction in the web development community for a while, particularly for its ability to streamline and simplify the styling process. Our article ‘The Perils of Functional CSS’ provided our first hand account of the associated pros and cons within introducing it into team workflows.

The approach hasn’t changed much since then, it focuses on creating small, reusable classes that each serve a specific purpose, significantly improving maintainability and reducing the complexity of CSS files. This article’s going to look at the positives, and why we’ve become accustomed to introducing it to our workflows.

A quick recap, what is Functional CSS?

Functional CSS, also known as utility-first CSS, breaks down styling into single-purpose classes. Each class applies one specific visual effect, such as .text-center for centering text or .m-4 for adding a margin. This modular approach enables developers to compose these classes directly in HTML, promoting reuse and consistency across the application.

Here’s an example of how functional CSS can be used to style a simple card component. We’ll use Tailwind CSS for this example:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://via.placeholder.com/400x200" alt="Placeholder Image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base"></p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#hashtag1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#hashtag2</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#hashtag3</span>
  </div>
</div>

There are certainly gains in using Functional CSS

Whilst there are plenty of gains, as Chris Coyier points out in his article ‘Modern CCS in Real Life’, there are also plenty of pains. However, looking positively forward, some of the gains we’ve found include:

• Efficiency: By using predefined utility classes, developers can rapidly style components without writing new CSS. This reduces the time spent switching between HTML and CSS files, making the development process faster and more efficient​​.
• Consistency: Functional CSS ensures a consistent application of styles, as the same class produces the same result every time. This consistency can help maintain a coherent design system throughout the project.
• Scalability: As applications grow, maintaining traditional CSS can become cumbersome with potential for duplication and conflicts. Functional CSS mitigates this by encouraging reuse of existing classes, making it easier to manage and scale styles​​.

Which Functional CSS Frameworks do we use

Over the years there are of course a number of frameworks that have emerged, all crafted to support the functional CSS methodology, and offering extensive libraries of utility classes to help every level of developer deliver their vision. Choice of course changes as new options emerge, and each developer has their own preference. The two we use and are probably most common are:

• Tailwind, which is certainly one of the more popular utility-first frameworks. It emphasises customisation and flexibility, and allows developers to create custom designs by composing utility classes, avoiding the constraints of predefined components​​.
• And then there’s Tachyons which is known for its readability and modular design, Tachyons provides a comprehensive set of utility classes that can be composed to create complex designs quickly. It promotes a consistent spacing and sizing system based on a four-based scale, enhancing layout predictability and alignment​​.

There are both Challenges and Considerations

While functional CSS offers numerous advantages, it is not without its challenges. Critics argue that it can lead to a proliferation of classes in HTML, making it harder to read and maintain. Additionally, finding the right class names and understanding their functions can be initially overwhelming. However, these challenges can be mitigated by thorough documentation and tools like Tachyons’, which help developers quickly find and understand class names​​.

Tips for Future Use

• Customisation: Tailwind CSS allows for extensive customisation. Use tailwind.config.js to extend or override the default configuration.
• Component-Based Design: Combine functional CSS with component-based frameworks like React or Vue to encapsulate styles within components, enhancing maintainability.
• Consistent Design: Utilise the design system principles of Tailwind CSS, such as consistent spacing and sizing scales, to create a coherent and maintainable design system.

By following these practices, you can leverage functional CSS to build efficient, scalable, and maintainable web applications.

A Front-end Developer’s Perspective

As a front-end developer, embracing functional CSS can transform workflows. The ability to build components with reusable utility classes not only speeds up development but also enhances the maintainability of the codebase. One tip for the future is to leverage the power of customisation within these frameworks. Tailwind CSS, for example, allows you to extend and modify its utility classes to fit your specific design needs. This flexibility ensures that while you benefit from the efficiency of functional CSS, you are not confined by its initial limitations.

Another important practice is to use functional CSS in conjunction with component-based frameworks like React or Vue. By doing so, you can encapsulate styles within components, making it easier to manage and update them as your application grows. Additionally, invest time in understanding and utilising design systems and scales, as they promote consistency and coherence in your design, much like how Tachyons implements its spacing and sizing systems.

So have we moved on?

No, not really, and that’s okay. The balance between functional CSS and Javascript is certainly something we’ve come to expect in any modern developers skillset, and as web development trends continue to prioritise performance, efficiency, and maintainability, functional CSS will likely see ongoing adoption. Moreover, the ever-growing community support and continuous integration with modern development tools and workflows ensure that functional CSS will remain relevant and valuable. In the not so distant future, we can expect functional CSS to become a standard practice, helping to drive efficiency in the products and services that we use every day.

This article first appeared on browserlondon.com on 15th of July, 2024.