Development |-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.CSS Encapsulation

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.


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:

Rendering Process

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:

File 1
1.container {
2  color: red;


File 2
1.container {
2  color: black;


Combined CSS: File 1 + File 2
1.container {
2  color: red;
5.container {
6  color: black;


Something to avoid
Important! It's easy to have different styles that apply to the same tags.
  • Every CSS linked to HTML is loaded on the same place (DOM)
  • The CSS is applied based on the idea of Cascading
  • Styles for different parts are loaded together

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:

Relevant Information
CSS Encapsulation is focused on DX - Developer Experience  and it aims to simplify the way of writing CSS

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


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

Something to avoid
On October 2022, the second most active maintainer of Emotion published this article: Why We're Breaking Up with CSS-in-JS

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.

A warning or caution
Remember! Before picking a third-party solution, please read the documentation of the framework you're working with. Some of them, like Angular, provide a built-in mechanism  to deal with CSS Encapsulation.

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.

Relevant Information
Most browsers support CSS Variables and are compatible with solutions like CSS-in-JS and CSS Modules. So, they are not tight to Web Components and ShadowDom


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.