Get better understanding of CSS with this right mental model

When I started my journey in web development, just like everyone else, I started with the basics: Learning HTML then CSS and then JavaScript. I just wanted to build things as soon as possible, so I only learned enough to allow myself to start building projects and then I would look up new things as I stumbled upon them or found the need to.
One advantage of this method was I was able to build small projects quickly, but there is also a major flaw in this method that it leaves a lot of gaps in the learning.

Fast forward to present, I'm in the process of learning ReactJS and I'm enjoying it, but whenever it came to styling components, it was just frustrating and counterintuitive because CSS just didn't feel very clear to me in my head. I would just add properties to achieve my desired results but somewhere along the way it felt like walking on an ancient bridge waiting to collapse on one wrong move.

Turns out, CSS is not as confusing or difficult as I thought it to be. In reality, I just didn't have the right mental model for CSS.
In general, people think of CSS as a collection of properties (key: value pairs) to achieve a desired look or arrangement. But this has changed now for me and will hopefully for you to by the end of this article.

1. Don't think of CSS as a collection of properties. Rather, think of CSS as a collection of layout modes

• CSS is comprised of many different layout algorithms, called layout modes.
• Each layout mode is like its own sub-language within CSS that can redefine and change how CSS properties are used. In other words, CSS properties are input to these algorithms. So, focus on how these algorithms use these properties rather than memorizing a bunch of properties.

2.Each layout is designed to solve a specific problem

• The default layout mode: Normal Flow, is meant to create digital documents.
• It's similar to the MS Word layout algorithm. ie. Headings & paragraphs stack vertically as blocks, while things like text, links, and images sit within these blocks.
• Apart from the Normal flow, two other layout modes that you'll use most often are the Flexbox and Grid layouts.

3.Flexbox and Grid layout modes

• Again, every layout mode was created to solve a specific problem. Think of it in this way: What problem does Flexbox solve?

• Flexbox is all about arranging a group of items in a row or column with tremendous flexibility and control over how each item is distributed and aligned within the group.

• What problem does Grid solve?
  CSS Grid makes arranging and aligning a group of items in 2-dimensions easier. It gives you flexibility and control over each individual items, or rows/columns of items to manipulate their arrangement.

Once you start thinking of CSS in terms of collection of layout modes, and how they affect and modify CSS properties, you get a clearer mental model of how things are happening even if the CSS spans to a lot of lines.