4 ms·

I used to think CSS was complex and everything was a hack. Then I sat down and actually read about the box model rules, how things like margin and padding affec

I used to think CSS was complex and everything was a hack. Then I sat down and actually read about the box model rules, how things like margin and padding affect elements, and how amazingly useful flexbox was. I've worked with web developers that still don't understand the usefulness of collapsing margins. Developers that think padding is an alternative to a margin and not understanding they are different things altogether. If your solution to spacing something is to wrap it in a new element and add padding then you're thinking backwards. You just add margin to the element you want to space. I firmly believe the idea that CSS (today at least) is complicated is just people not trying to learn what modern CSS is like. Learn your basics like the box model, block elements, inline elements, etc. Then learn about flex and grid. That right there is like 90% of the knowledge you need to make anything in CSS today. The way I learned was being given Sketch or Photoshop documents with all the sizes and margins/paddings and told "now make that a website". I really wish there was a learning tool that just had website/website element mockups with sizes and your job is to replicate it as close as possible in HTML/CSS.

roelschroeven 6y ago
> I used to think CSS was complex and everything was a hack I do web development only occasionally, so I'm not familiar with current best practices and rely on trying to mine the docs for what I'm trying to do and googling for it. I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. That changed with the introduction of flex and grid. Suddenly I'm able to use the layout I want without any real problems. CSS is now usable for both styling and layout.
- Izkata 6y ago
  > I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. > That changed with the introduction of flex and grid. Half true. Flex and grid are a significant improvement, but "hopeless" was just about always inaccurate. The vast majority of issues people had with layouts pre-flex were because they didn't understand the box model and how block/inline/inline-block/float interacted with each other. ...Unfortunately, not understanding the box model is still a problem, but flex/grid can get people further without needing to understand it.
trymas 6y ago
Do you have any specific sources that you would recommend to read on this?
- Philip-J-Fry 6y ago
  The MDN Docs is my go to place for anything CSS related https://developer.mozilla.org/en-US/docs/Learn/CSS https://developer.mozilla.org/en-US/docs/Learn/CSS
rimliu 6y ago
> I firmly believe the idea that CSS (today at least) is > complicated is just people not trying to learn what modern > CSS is like. You are absolutely correct.
dsego 6y ago
Devs want composable blocks and design is all about context & harmony, so padding/margin depend on the context, eg I want a flex gap and not margins on elements. Without flex you had to do hacks, like negative margins on the parent row. CSS also doesn't have constraints or relative measurements. For example flex containers without a width can't have equally sized children https://codepen.io/brettdonald/pen/oRpORG https://codepen.io/brettdonald/pen/oRpORG). And this is a common theme, you can't elegantly style things based on existing dimensions, number of elements, etc which then you need to work around with media queries or hacks. Also, flex & grid have the same problem as async in JS, when you start building your layout with it, it's turtles all the way down, everything becomes flexbox or grid. That's what I think people complain about, instead of having tools that solve the few dozen common scenarios, CSS gives us thousands of rules that need to be carefully assembled and still not solve the standard layouts.

roelschroeven 6y ago

> I used to think CSS was complex and everything was a hack I do web development only occasionally, so I'm not familiar with current best practices and rely on trying to mine the docs for what I'm trying to do and googling for it. I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. That changed with the introduction of flex and grid. Suddenly I'm able to use the layout I want without any real problems. CSS is now usable for both styling and layout.

Izkata 6y ago
> I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. > That changed with the introduction of flex and grid. Half true. Flex and grid are a significant improvement, but "hopeless" was just about always inaccurate. The vast majority of issues people had with layouts pre-flex were because they didn't understand the box model and how block/inline/inline-block/float interacted with each other. ...Unfortunately, not understanding the box model is still a problem, but flex/grid can get people further without needing to understand it.

trymas 6y ago

Do you have any specific sources that you would recommend to read on this?

Philip-J-Fry 6y ago
The MDN Docs is my go to place for anything CSS related https://developer.mozilla.org/en-US/docs/Learn/CSS https://developer.mozilla.org/en-US/docs/Learn/CSS

rimliu 6y ago

> I firmly believe the idea that CSS (today at least) is > complicated is just people not trying to learn what modern > CSS is like. You are absolutely correct.

dsego 6y ago

Devs want composable blocks and design is all about context & harmony, so padding/margin depend on the context, eg I want a flex gap and not margins on elements. Without flex you had to do hacks, like negative margins on the parent row. CSS also doesn't have constraints or relative measurements. For example flex containers without a width can't have equally sized children https://codepen.io/brettdonald/pen/oRpORG https://codepen.io/brettdonald/pen/oRpORG). And this is a common theme, you can't elegantly style things based on existing dimensions, number of elements, etc which then you need to work around with media queries or hacks. Also, flex & grid have the same problem as async in JS, when you start building your layout with it, it's turtles all the way down, everything becomes flexbox or grid. That's what I think people complain about, instead of having tools that solve the few dozen common scenarios, CSS gives us thousands of rules that need to be carefully assembled and still not solve the standard layouts.