The Difference Between a CSS Library and a CSS Architecture

A CSS library and a CSS architecture are often confused with one another, but they serve distinct purposes in web development. This article explores the differences between the two concepts.

Also available in Español

The Problem

A team adopts a component library to create consistent and visually appealing UI elements. While the library may deliver high-quality components, well-documented documentation, and consistent appearance, a persistent problem arises. Despite the library's effectiveness in delivering components, the team struggles to predict which conflicting rules will take precedence on a given page.

The library itself does not promise to resolve such issues, as its primary focus is on providing components rather than managing the cascade of styles.

Why the Problem Exists

Libraries are typically evaluated based on the quality and completeness of their shipped components. Factors such as the number of components, their consistency, and the comprehensiveness of the documentation are all considered important. However, these metrics do not address the underlying issue of how the components interact with each other and with other styles on the page.

A library may score well in these areas and still leave the cascade unmanaged, as it is not responsible for establishing precedence, boundaries, or resolution order.

The First Principle

A library is fundamentally a collection of components, while an architecture is a collection of guarantees. A library answers the question, "What can I use?" It provides developers with a set of reusable components that can be easily integrated into their projects. On the other hand, an architecture answers the question, "What can I rely on?" It establishes a framework for how those components should behave when combined with each other and with other styles on the page.

A team may possess an excellent, well-documented component library, but without an underlying architecture, they may still face uncertainty regarding how those components will resolve against one another or against styles already present on the page. The library itself does not guarantee how its components will interact, as addressing this aspect is not part of what a "library" entails.

Demonstrating the Principle

Consider the following example:

.card-title {

font-size: 1.25rem;

}

.text-lg {

font-size: 2rem;

}

Both of these styles are from the same CSS library and are applied to the same element. In this case, the outcome of which style takes precedence is determined by factors such as specificity, source order, and other stylistic elements present in the stylesheet at the moment. The library never explicitly declares an answer to this question, as it is not its responsibility to do so. It simply provides two components without addressing their relationship to each other.

The Broader Lesson

The confusion between a CSS library and a CSS architecture extends beyond just web development. Whenever abundance is mistaken for structure, similar issues can arise. A well-stocked toolbox does not guarantee how the tools should be used together; it merely provides a collection of tools. Similarly, a library may offer a plethora of components, but without a clear architecture to guide their usage, developers may struggle to understand how those components should interact with each other and with other styles on the page.

This distinction between abundance and structure is a key takeaway from the article, emphasizing the importance of understanding the difference between a library and an architecture in CSS development.