Development |10/30/2022-4 min read

CSS Encapsulation

Explore the capabilities of CSS Encapsulation in front-end development. Learn how scoped styles streamline the developer experience, and immerse yourself in the cutting-edge worlds of Web Components and ShadowDom.

As a front-end developer or someone who intends to create any website or web application, you will end up dealing with CSS. Some essential concepts around the language need to be understood to make your life easier while you're writing it.

As part of this article, I want to focus on CSS Encapsulation.

CSS

What is CSS (Cascading Style Sheets)?

CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. CSS Basics, MDN

What does means Cascading?

Stylesheets cascade — at a very simple level, this means that the order of CSS rules matters; when two rules are applied and have equal specificity, the one that comes last in the CSS is the one that will be used. CSS Building Blocks, MDN

How is CSS applied?

To understand this process, let's take a look at this image from CSS First Steps, MDN:

As you can appreciate in the previous image, the third step is:

The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images and videos ... and linked CSS! CSS First Steps, MDN

Let's analyze a small example to ilustrate this:

1.container {
2  color: red;
3}
css

1.container {
2  color: black;
3}
css

1.container {
2  color: red;
3}
4
5.container {
6  color: black;
7}
css

CSS Encapsulation

Since the beginning of the web, developers have been looking for solutions to this, and some of them are pretty popular, like BEM. But let's continue with CSS Encapsulation and some definitions are:

CSS Encapsulation allows for scoping one’s styles to a specific component or reusable piece of code. CSS Encapsulation in Angular, Martine Dowden

CSS Encapsulation, or the ability to add new content to your website that does not interfere with the previous one. Why Should I Learn About Web Components? , Myself

So, the idea of CSS Encapsulation allows us to:

• Define a piece of css and use it
• Isolate those styles in an easy way
• No need to worry about the order of the styles
• No need to write complex classes names

Popular Tools

There are many tools out there that try to solve this problem, but we can mainly find different schools.

CSS-in-JS

CSS-in-JS is a styling technique by which JavaScript is used to style components

• Styled Components
• Emotion

CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default

Both are great strategies, and the choice depends on your preferences.

Web Components and ShadowDom

I wrote an article about web components explaining the basic concepts behind Web Components and ShadowDom Why Should I Learn About Web Components? , Myself

But to summarize here, the concept of ShadowDom is part of the HTML living standard and allows us to provide a new DOM node with encapsulated styles.

CSS Variables

CSS Variables is the most commonly used name for CSS Custom Properties.

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document Using CSS custom properties (variables), MDN

Why do I mention these properties? Well, while using Web Components and ShadowDom for CSS encapsulation, you could still override your styles in case you need them with the power of CSS variables.

Conclusions

The idea of encapsulating styles is not new, and there are many ways of solving it. External tools can simplify this process, but at the end of the day, they’re applying different strategies to avoid those collisions and create the feeling of encapsulation.

CSS is a great tool, but for a large project, it could be challenging to avoid collision and style overriding. Therefore, setting up the right strategy based on your needs is crucial.