CSS, the language that styles the web, generates debate with its global scope. In traditional CSS stylesheets, styles apply across an entire site or app. Over the years, naming conventions have emerged to help contain that chaos, like BEM or SMACSS. These aspire to create more modular systems and achieve scalable tech out of CSS properties when inherently it's not.
The focus on global style components intensifies as web dev takes firmer steps towards function components and modular design. The original composition separates concerns in HTML, CSS, and JS files. But more recent CSS framework integrations, like the styling React component, couple HTML and JS in duplicate files. This process is achievable by dividing by components and not by languages. As a result, teams can style, let's say, a component in React. Yet, it raises the question: how the style should fit into this structure?
CSS Component Styling Libraries
There are many styling libraries and systems to answer this question. We’ll look at some of the main ones with advantages over traditional CSS.
1. CSS with Sass Modules
One of the most popular CSS extensions is Sass. This extension has a degree of modularity, which allows for dividing stylesheets. As a result, these stylesheets get divided into several smaller ones. Many devs follow common structures to organize projects further. For instance, there is the 7-1 pattern.
At last, these files get combined into one stylesheet. To do so, it uses the @import feature. Further, this avoids risking naming conflicts. Saas made their next big step in 2019, replacing @important with @use and @forward. These new features define relations between files in a project. Not only does this removes conflicts. Also, it clarifies the dependencies' origins. For example, @use gives a namespace to imported features. This naming brings in styles from the buttons file, accessed in the following way:
2. CSS Modules
CSS Modules started in 2015, generating a global stylesheet with unique class names for each component. This build process creates .module.css and .js files for each component. Moreover, these CSS lines of code can use any class name, even repeating those in external CSS files. That’s possible because Modules transform CSS class names into unique ones. This method also avoids naming conflicts. Another bonus is that this unique naming still includes human-readable words. It facilitates finding and maintaining styles for developers. For example, if we have a file called box.css, a CSS selector, once compiled, will turn into something like the following. The result will be a unique selector with the file name, the class name, and a random hash.
3. CSS with CSS-in-JS
Component libraries, such as Grommet and Rebass, offer prefab components. Accepting system properties often styles these libraries. With Rebass, you can style a box component declared in the JSX in the following way:
These libraries are likely to be the most comfortable for CSS purists. They can keep styles in the same file as the component or import them for a more traditional approach. For instance, you can create a folder for a Button component that has both index.js and style.js files. You can specify details such as border radius and font size there. One of the main advantages of CSS-in-JS is its fluid way of theme styles. This is possible by passing them via props and changing them according to their state. In Saas and CSS Modules, the workaround is applying class names with a basis on props. Installing Styled Components, it looks like this:
You can use Xstyled, a Styled Components and Emotion wrapper, for extra clean and organized syntax. If we have a value set for “primary” in our theme.js file, we can write:
What is the Best CSS Styling Choice?
This question still generates a hot debate nowadays. In this context, Saas is a superior technology. What's more, companies are investing vast resources in implementing it. Often, they fail to see the benefit of switching to a new model. With the introduction modules, Saas tackles some of the scoping issues. Before, these had developers considering other solutions.
There are several other options for CSS styling, like the Babel plugin. But this approach is not just a niche, tho: some big production projects use it! To name some extra build tools: Patreon, Target, Reddit, Autodesk, Atlaskit, Typeform, Vogue, and Coinbase rely on CSS Rule Components.