This video is available to students only

Encapsulated CSS

Knowing where to place your styles is critical to understanding composable layouts. Using the Principles of Encapsulated CSS you will know exactly how to apply your layout styles in your components.

Now that we understand the power of composition when working with layouts, the next obvious question is how do we apply this in practice? One of the more important parts of building composable layouts is knowing at which level in your component tree you should be applying your styles. This is why I have compiled some important principles that I like to call "Encapsulated CSS".

What is Encapsulated CSS?#

Encapsulated CSS is a term I use to summarize the rules of how to apply CSS styles in a composable way. It's based on the programming principle of encapsulation. Here is my best attempt 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 languages utilize a module system, which follows the principles of encapsulation.

When you import a module like React, you get a group of functions that help you build a React application:

However you don't have access to the actual internals that make a React application work. Those internals are encapsulated inside of the React namespace, and only through the exposed functions can you access the React internals.

In object-oriented programming, one often implements encapsulation via private properties and methods, like this:

Functional programming would probably use Closures to achieve something similar:

In both of those examples, you have values that are grouped together and access to them is restricted through appropriate channels.

Encapsulated CSS is based on that same principle. It's a methodology that helps you group together related styles at the correct component level, only applying styles through appropriate channels.

 

This page is a preview of Composing Layouts in React

Start a new discussion. All notification go to the author.