CSS in the Age of Components

Using CSS in this age of components is difficult, especially where web layout is concerned. In this module, you will learn the rules to be able to build composable layouts.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

Lesson Transcript

  • [00:00 - 00:11] What's up guys, Travis here, and bringing you another lesson in composing layouts in React. Today we're going to learn about CSS and the age of components.

  • [00:12 - 00:29] See right now we've entered the age of components. Most front-end frameworks like React use components as their foundation. There are several reasons for this, but crucially, components of all applications be broken into simple single-purpose parts that can be composed together to solve more complex needs.

  • [00:30 - 00:44] This is especially true when considering the layout of your web application. Unfortunately, CSS was invented to solve problems from the top down, from general rules down to more specific rules.

  • [00:45 - 01:05] A typical CSS style sheet is probably organized something like this, with general styles like your body up at the top. More sight-wide, general rules like your main nav or footer, and then more specific rules like your blog feed, post, your sign-up form, or your first name input.

  • [01:06 - 01:23] On the other hand, components encourage you to start from the bottom up, breaking your page down into more specific parts first, often in isolation from the whole, and then composing them together to build up that whole. The React docs even devote a whole section called Thinking in React that emphasizes this very point.

  • [01:24 - 01:39] These contradictory methodologies can lead to some frustrating decisions. It can be difficult to compose your apps using lower level components, while still using CSS, which expects you to know what you're building before you've built it.

  • [01:40 - 01:54] Many tools have been created to help us with this problem like SAS, less, CSS modules, and CSS and JS. They also have the problem of maintaining CSS style sheets, but they all fall short in one problem that tooling can never solve.

  • [01:55 - 02:06] And that is 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.

  • [02:07 - 02:13] By the end of this module, you will know the answers to this question, and you can start composing layouts in your web app.

  • [00:00 - 00:11] What's up guys, Travis here, and bringing you another lesson in composing layouts in React. Today we're going to learn about CSS and the age of components.

    [00:12 - 00:29] See right now we've entered the age of components. Most front-end frameworks like React use components as their foundation. There are several reasons for this, but crucially, components of all applications be broken into simple single-purpose parts that can be composed together to solve more complex needs.

    [00:30 - 00:44] This is especially true when considering the layout of your web application. Unfortunately, CSS was invented to solve problems from the top down, from general rules down to more specific rules.

    [00:45 - 01:05] A typical CSS style sheet is probably organized something like this, with general styles like your body up at the top. More sight-wide, general rules like your main nav or footer, and then more specific rules like your blog feed, post, your sign-up form, or your first name input.

    [01:06 - 01:23] On the other hand, components encourage you to start from the bottom up, breaking your page down into more specific parts first, often in isolation from the whole, and then composing them together to build up that whole. The React docs even devote a whole section called Thinking in React that emphasizes this very point.

    [01:24 - 01:39] These contradictory methodologies can lead to some frustrating decisions. It can be difficult to compose your apps using lower level components, while still using CSS, which expects you to know what you're building before you've built it.

    [01:40 - 01:54] Many tools have been created to help us with this problem like SAS, less, CSS modules, and CSS and JS. They also have the problem of maintaining CSS style sheets, but they all fall short in one problem that tooling can never solve.

    [01:55 - 02:06] And that is 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.

    [02:07 - 02:13] By the end of this module, you will know the answers to this question, and you can start composing layouts in your web app.