Most modern frameworks, like React, use components as their foundation. They do this for a few reasons, but a crucial one is that components allow you to break your app into simple single-purpose parts that can then be composed together to solve more complex needs.

Unfortunately, CSS was invented to solve problems from the top down, 

starting with more general rules to more specific rules

. Components encourage you to start from the bottom up, breaking your pages down into the more specific parts first, often in isolation to the whole, and then composing them together. 

Many tools and naming conventions have been created to help us maintain our style sheets like BEM, SASS, Less, CSS-Modules, and CSS-in-JS, but they all fall short in the one problem that tooling can never solve: 

Which component should be in charge of which styles?

The answer to this question is key to making composition work, especially where web layout is concerned. That answer is Encapsulated CSS.

Encapsulated CSS is a term that summarizes the rules of how to apply  CSS styles in a composable way. It’s based on the programming principle of encapsulation. If we were to define encapsulation in a language-agnostic way, encapsulation involves grouping related things and restricting access to those things except through appropriate channels.

For example, many program languages utilize a module system, which follows the principles of encapsulation.

, you get a group of functions that help you build a React application, but you don’t have access to the actual internals that make a React applications work. 

Encapsulated CSS is based on that same principle. It’s a methodology that helps group-related styles at the correct component level and only applies styles through appropriate channels.

There are two essential principles of Encapsulated CSS:

“Elements do not lay themselves out.”

 When I say that elements don’t lay themselves out, I am specifically speaking to an element's position, size, and margin.

/*Not ok to set on the element*/

display: inline;
width: 100px;
margin-top: 2rem;
position: relative;

“Elements style themselves and layout only their immediate children.”

 Properties that involve the border-box and inward are considered part of the component and therefore they should be applied at the element level. This also includes the layout environment of the component’s immediate children. Therefore, it is the parent component’s responsibility to set its direct children's position, size, and margin.

/*Ok to set on the element*/

border: 1px solid #08228c;
color: #4c6ef5;
padding: 3rem;
font-family: sans-serif;

/*
Ok because you are applying the property
to the direct children
*/
article > p {
  margin-top: 1rem;
}

If a component shouldn’t set its own layout properties, how do you set them? I mentioned earlier that encapsulation allows you to access properties through appropriate channels. These appropriate channels in components are props and the direct child combinator.

In React, we use props as inputs to our component, much like functions use arguments. Our components use these props in our components. Just like we can expose a 

 prop, we can expose layout properties like margin-top or min-width:

export const MyButton = (props) => (
   <button 
      onClick={props.onClick} 
      style={{ minWidth: props.minWidth }}
   >
     {props.label}
   </button>
);

Using props in this manner works well with one or two properties, but it becomes unwieldy quickly as you expose more and more properties.

The props of your component should also be a reflection of what your component does. Having an arbitrary 

 prop doesn’t make sense on a calendar component.

The other channel for adding styles is using the direct child combinator in the parent component.

This tool allows us to select any or all of our parent containers’ immediate children and apply the layout styling we need. 

Let’s take the following Blog Post component:

export const BlogPost = (props) => {
  return (
    <article className="blog-post">
      <h2 className="blog-title">{props.blogTitle}</h2>
      {props.paragraphs.map((paragraph, i) => {
        return <p key={i}>{paragraph}</p>;
      })}
    </article>
  );
};

Applying styles that follow the principles of Encapsulated CSS, we could do something like this:

.blog-post {
  padding: 1rem;
}

.blog-post > h2 {
  margin-bottom: 3rem;
  max-width: 75%;
}

.blog-post > p + p {
  margin-top: 2rem;
}

.blog-title {
  text-transform: uppercase;
  font-size: 1.5rem;
  color: darkgray;
}

 classes set their own non-layout-related styles. However, when we needed to set layout properties on any of the elements, we used the direct child combinator to select the appropriate children of the 

 to set those properties. For example, we use 

 class to set the layout properties we needed.

At this point, one might start to ask why bother to go through this ceremony of adding a separate rule for the direct children just to add a layout property? One could argue that you could write less CSS by just applying the layout properties to the corresponding element. 

First of all, because we didn’t add any layout properties to the 

 class, this blog post component can safely be placed in any context and not interfere with the layout environment that it is being put. The children can also now be refactored into components, if needed, and won’t bring along the baggage of the layout environment it was initially created in.

It also helps with debugging. One of the most significant difficulties of debugging CSS is determining where your styles are coming from. It is easier to track down styles if you have rules in place where those style properties originate. If the style you are looking for is layout-related, you know that the style must be on the parent element.

Encapsulated CSS is about creating restrictions that make sense and encourages you to write code that is easier to maintain and refactor. By following these rules, your components will become much easier to refactor and compose anywhere in your app.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Encapsulation

Encapsulated CSS

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript