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.
2.Each layout is designed to solve a specific problem
3.Flexbox and Grid layout modes
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.
The above is the detailed content of CSS is confusing? Youre not alone. For more information, please follow other related articles on the PHP Chinese website!