Seonglae ChoTo enable efficient style sheet code writing, cascading style sheets were created for reusability. However, early CSS had limited support for dynamic features, which led to the emergence of preprocessing concepts where code written in other languages could be converted to CSS. In 2007, Ruby-based SASS was introduced. While the cascading coding approach had its advantages, it differed from the Imperative Programming paradigm of traditional programming languages, making it naturally difficult for developers to use. This created a clearer distinction between designers and developers. Then in 2009, Less CSS emerged as a CSS Preprocessor written in JavaScript. This gained popularity alongside the growth of the Node.js ecosystem, and after 2015, SCSS became standardized and evolved further.
However, as native CSS introduced features like CSS Variable and CSS @function, many of the dynamic styling capabilities provided by preprocessors became unnecessary. Instead of language extensions for CSS, post-processors began to emerge for backward compatibility with future or previous versions. CSS is transformed after being converted to an AST, which enabled plugin pipelines. Among these plugins, Utility First CSS Framework emerged, smartly solving CSS classname problems with shipping only used classes using PostCSS. They solve the collision and duplication issues that arise as rules grow by mapping CSS rules and classes one-to-one. At the same time, by passing to classes, they maintain CSS's core cascading feature through selectors. While Bootstrap may seem like utility-first, it's not a complete example of following the principle as it provides abstraction classes like btn. This approach, being suitable for the AI coding era, has become the de facto standard in the market.
However, a remaining challenge is that Tailwind's approach of mapping classnames directly to CSS rules prevents the use of semantic classnames. Attempts to address this issue, such as the attributify feature from WindiCSS or UnoCSS, have emerged, though they come with some typing and JIT compilation challenges.
Tailwind CSS Adam Wathan (2017)
The "separation of concerns" principle states that HTML should only handle content while CSS should only handle design. In reality, CSS becomes strongly dependent on HTML structure. BEM Methodology can reduce HTML dependency, but duplication and inconsistency occur when similar components are created. Atomic Design Pattern ensures reusability through design pattern-centric naming. However, this makes HTML difficult to restyle. With the introduction of utility classes, all design can be composed of small, reusable utility class sets, enabling consistency and new UI composition without CSS modifications.