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.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Encapsulated CSS</h1><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210704204625236_mika-baumeister-J5yoGZLdpSI-unsplash.jpg" attachmentid="8b5be11b-fd42-4096-a91b-964544e6be3e" contenteditable="false"><div></div></figure><p>Photo by&nbsp;<a href="https://unsplash.com/@mbaumi?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Mika Baumeister</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/css?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer nofollow">Unsplash</a></p><p>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.</p><p>Unfortunately, CSS was invented to solve problems from the top down,&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing#create_logical_sections_in_your_stylesheet" rel="noopener noreferrer nofollow">starting with more general rules to more specific rules</a>. 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.&nbsp;</p><p>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:&nbsp;<strong>Which component should be in charge of which styles?</strong></p><p>The answer to this question is key to making composition work, especially where web layout is concerned. That answer is Encapsulated CSS.</p><h2 class="heading-anchor-text" id="what-is-encapsulated-css"><span><strong>What is Encapsulated CSS</strong></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#what-is-encapsulated-css">#</a></h2><p>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.</p><p>For example, many program languages utilize a module system, which follows the principles of encapsulation.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-HGbsx" id="cm-HGbsx">import React from “react”;</textarea><p>When you import a module like <code>React</code>, 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.&nbsp;</p><p>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.</p><h2 class="heading-anchor-text" id="the-two-principles-of-encapsulated-css"><span><strong>The Two Principles of Encapsulated CSS</strong></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#the-two-principles-of-encapsulated-css">#</a></h2><p>There are two essential principles of Encapsulated CSS:</p><p>The first principle is:&nbsp;<strong>“Elements do not lay themselves out.”</strong>&nbsp;When I say that elements don’t lay themselves out, I am specifically speaking to an element's position, size, and margin.</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-QujUl" id="cm-QujUl">/*Not ok to set on the element*/

display: inline;
width: 100px;
margin-top: 2rem;
position: relative;</textarea><p><em> </em></p><p>The second principle is:&nbsp;<strong>“Elements style themselves and layout only their immediate children.”</strong>&nbsp;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.</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-cUG34" id="cm-cUG34">/*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 &gt; p {
  margin-top: 1rem;
}</textarea><p><em> </em></p><h2 class="heading-anchor-text" id="using-appropriate-channels"><span>Using Appropriate Channels</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#using-appropriate-channels">#</a></h2><p>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.</p><p>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 <code>label</code> or an <code>onClick</code> prop, we can expose layout properties like margin-top or min-width:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-Azsab" id="cm-Azsab">export const MyButton = (props) =&gt; (
&nbsp; &nbsp;&lt;button 
      onClick={props.onClick} 
      style={{ minWidth: props.minWidth }}
   &gt;
&nbsp; &nbsp; &nbsp;{props.label}
&nbsp; &nbsp;&lt;/button&gt;
);</textarea><p>Using props in this manner works well with one or two properties, but it becomes unwieldy quickly as you expose more and more properties.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-ghZlz" id="cm-ghZlz">&lt;Component
  width="50%"
  minWidth={300}
  height={500}
  display="inline-block"
  marginLeft="0.5rem"
  marginRight="2rem"
/&gt;</textarea><p> </p><p>The props of your component should also be a reflection of what your component does. Having an arbitrary <code>marginLeft</code> prop doesn’t make sense on a calendar component.</p><p>The other channel for adding styles is using the direct child combinator in the parent component.</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-AXGUB" id="cm-AXGUB">.parent &gt; * {
&nbsp; &nbsp;margin: 1rem;
}</textarea><p>This tool allows us to select any or all of our parent containers’ immediate children and apply the layout styling we need.&nbsp;</p><h2 class="heading-anchor-text" id="a-blog-post-component"><span><strong>A Blog Post Component</strong></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#a-blog-post-component">#</a></h2><p>Let’s take the following Blog Post component:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-KoL1k" id="cm-KoL1k">export const BlogPost = (props) =&gt; {
  return (
    &lt;article className="blog-post"&gt;
      &lt;h2 className="blog-title"&gt;{props.blogTitle}&lt;/h2&gt;
      {props.paragraphs.map((paragraph, i) =&gt; {
        return &lt;p key={i}&gt;{paragraph}&lt;/p&gt;;
      })}
    &lt;/article&gt;
  );
};</textarea><p>Applying styles that follow the principles of Encapsulated CSS, we could do something like this:</p><textarea data-iscodemirror="true" data-mode="text/css" data-uniqueid="cm-xQLp4" id="cm-xQLp4">.blog-post {
  padding: 1rem;
}

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

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

.blog-title {
  text-transform: uppercase;
  font-size: 1.5rem;
  color: darkgray;
}</textarea><p>In the above stylesheet, the <code>.blog-post </code>and <code>.blog-title</code> 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 <code>.blog-post</code> to set those properties. For example, we use&nbsp;<code>.blog-post &gt; h2</code> to select the <code>h2</code> tags that were direct children of the <code>.blog-post</code> class to set the layout properties we needed.</p><p>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.&nbsp;</p><h2 class="heading-anchor-text" id="why-bother?"><span>Why Bother?</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#why-bother?">#</a></h2><p>First of all, because we didn’t add any layout properties to the <code>.blog-post</code> 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.</p><p>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.</p><p>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.</p>

AUTHOR

Travis Waith-Mair

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

 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.

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. 

 class, this blog post component can safely be placed in any context and not interfere with the layout environment in which 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.

Encapsulated CSS is about creating restrictions that make sense and encourage 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.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Encapsulated CSS</h1><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210704204625236_mika-baumeister-J5yoGZLdpSI-unsplash.jpg" attachmentid="8b5be11b-fd42-4096-a91b-964544e6be3e" contenteditable="false"><div></div></figure><p>Photo by&nbsp;<a href="https://unsplash.com/@mbaumi?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener noreferrer nofollow">Mika Baumeister</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/css?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener noreferrer nofollow">Unsplash</a></p><p>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.</p><p>Unfortunately, CSS was invented to solve problems from the top down,&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing#create_logical_sections_in_your_stylesheet" target="_blank" rel="noopener noreferrer nofollow">starting with more general rules to more specific rules</a>. 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.&nbsp;</p><p>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:&nbsp;<strong>Which component should be in charge of which styles?</strong></p><p>The answer to this question is key to making composition work, especially where web layout is concerned. That answer is Encapsulated CSS.</p><h2 class="heading-anchor-text" id="what-is-encapsulated-css"><span><strong>What is Encapsulated CSS</strong></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#what-is-encapsulated-css">#</a></h2><p>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.</p><p>For example, many program languages utilize a module system, which follows the principles of encapsulation.</p><div style="
          min-height: 40px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-HGbsx" id="cm-HGbsx">import React from “react”;</textarea></div><p>When you import a module like <code>React</code>, 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.&nbsp;</p><p>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.</p><h2 class="heading-anchor-text" id="the-two-principles-of-encapsulated-css"><span><strong>The Two Principles of Encapsulated CSS</strong></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#the-two-principles-of-encapsulated-css">#</a></h2><p>There are two essential principles of Encapsulated CSS:</p><p>The first principle is:&nbsp;<strong>“Elements do not lay themselves out.”</strong>&nbsp;When I say that elements don’t lay themselves out, I am specifically speaking about an element's position, size, and margin.</p><div style="
          min-height: 160px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/css" data-uniqueid="cm-QujUl" id="cm-QujUl">/*Not ok to set on the element*/

display: inline;
width: 100px;
margin-top: 2rem;
position: relative;</textarea></div><p><em> </em></p><p>The second principle is:&nbsp;<strong>“Elements style themselves and layout only their immediate children.”</strong>&nbsp;Properties that involve the <code>border-box</code> 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.</p><div style="
          min-height: 352px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/css" data-uniqueid="cm-cUG34" id="cm-cUG34">/*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 &gt; p {
  margin-top: 1rem;
}</textarea></div><p><em> </em></p><h2 class="heading-anchor-text" id="using-appropriate-channels"><span>Using Appropriate Channels</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#using-appropriate-channels">#</a></h2><p>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.</p><p>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 <code>label</code> or an <code>onClick</code> prop, we can expose layout properties like margin-top or min-width:</p><div style="
          min-height: 208px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-Azsab" id="cm-Azsab">export const MyButton = (props) =&gt; (
&nbsp; &nbsp;&lt;button 
      onClick={props.onClick} 
      style={{ minWidth: props.minWidth }}
   &gt;
&nbsp; &nbsp; &nbsp;{props.label}
&nbsp; &nbsp;&lt;/button&gt;
);</textarea></div><p>Using props in this manner works well with one or two properties, but it becomes unwieldy quickly as you expose more and more properties.</p><div style="
          min-height: 208px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-ghZlz" id="cm-ghZlz">&lt;Component
  width="50%"
  minWidth={300}
  height={500}
  display="inline-block"
  marginLeft="0.5rem"
  marginRight="2rem"
/&gt;</textarea></div><p> </p><p>The props of your component should also be a reflection of what your component does. Having an arbitrary <code>marginLeft</code> prop doesn’t make sense on a calendar component.</p><p>The other channel for adding styles is using the direct child combinator in the parent component.</p><div style="
          min-height: 88px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/css" data-uniqueid="cm-AXGUB" id="cm-AXGUB">.parent &gt; * {
&nbsp; &nbsp;margin: 1rem;
}</textarea></div><p>This tool allows us to select any or all of our parent containers’ immediate children and apply the layout styling we need.&nbsp;</p><h2 class="heading-anchor-text" id="a-blog-post-component"><span><strong>A Blog Post Component</strong></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#a-blog-post-component">#</a></h2><p>Let’s take the following Blog Post component:</p><div style="
          min-height: 256px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-KoL1k" id="cm-KoL1k">export const BlogPost = (props) =&gt; {
  return (
    &lt;article className="blog-post"&gt;
      &lt;h2 className="blog-title"&gt;{props.blogTitle}&lt;/h2&gt;
      {props.paragraphs.map((paragraph, i) =&gt; {
        return &lt;p key={i}&gt;{paragraph}&lt;/p&gt;;
      })}
    &lt;/article&gt;
  );
};</textarea></div><p>Applying styles that follow the principles of Encapsulated CSS, we could do something like this:</p><div style="
          min-height: 448px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/css" data-uniqueid="cm-xQLp4" id="cm-xQLp4">.blog-post {
  padding: 1rem;
}

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

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

.blog-title {
  text-transform: uppercase;
  font-size: 1.5rem;
  color: darkgray;
}</textarea></div><p>In the above stylesheet, the <code>.blog-post </code>and <code>.blog-title</code> 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 <code>.blog-post</code> to set those properties. For example, we use&nbsp;<code>.blog-post &gt; h2</code> to select the <code>h2</code> tags that were direct children of the <code>.blog-post</code> class to set the layout properties we needed.</p><p>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.&nbsp;</p><h2 class="heading-anchor-text" id="why-bother"><span>Why Bother?</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#why-bother">#</a></h2><p>First of all, because we didn’t add any layout properties to the <code>.blog-post</code> class, this blog post component can safely be placed in any context and not interfere with the layout environment in which 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.</p><p>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.</p><p>Encapsulated CSS is about creating restrictions that make sense and encourage 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.</p>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Encapsulated CSS

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript