Learn CSS

Post by brundolf » Sat, May 22, 2021, 4:40 AM UTC

matwood wrote: post #23

raspasov wrote: post #13

In terms of Flexbox, this guide in the React Native documentation is BY FAR the best guide I've seen anywhere. It tells you just the right amount of things you need to know to be productive. https://reactnative.dev/docs/flexbox It's not React Native specific. It works for web-based CSS as well.

That's a nice site to learn. This is my goto reference (they even sell it as a poster). https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Post by brundolf » Sat, May 22, 2021, 4:52 AM UTC

hmsimha wrote: post #174

exogen wrote: post #157

I've always wanted to write my own CSS guide, because (in my experience) people are rarely focused on the right thing when they're writing CSS. Developers (especially junior) think that if it looks right, that it is right, and they're done. But CSS is not just specifying how something looks, you are also very much specifying visual behavior , not just appearance. Content is dynamic, layouts change at different breakp…

> Or, using absolute position to, say, anchor a close button to the top right of an element. Sure, the way you did it happened to put it visually in the right spot, but it's not actually in the right spot according to the layout engine because its offset parent is not the element you're trying to anchor it to, so if other content gets put in there eventually, it will be in the wrong spot. I'm absolutely guilty of thi…

Post by globular-toast » Sat, May 22, 2021, 9:15 AM UTC

goto11 wrote: post #33

Looks great! Small pet peeve regarding tutorials: When learning a new technology I don't care about the headaches people had 20 years ago. My first concern is how I use the technology and what it can do for me. The section about layout starts with: " In the early days of the web, designs more complex than a simple document were laid out with elements. Separating HTML from visual styles was made easier when CSS was wi…

Post by goto11 » Sat, May 22, 2021, 10:17 AM UTC

tadfisher wrote: post #170

stupidcar wrote: post #82

Earlier quoted context omitted.

History can be important, but I don't see what knowing that developers used to (ab)use for layout explains about modern CSS. By all means, include historical context if it helps explain why something works the way it does, but otherwise drop it. And while backwards compatibility remains a concern for browser vendors, it's much less of a concern for web developers nowadays given the vast majority of users are using au…

I'm confused why the web standards don't include something like a version header for JS and CSS. That's an easy way to eliminate cruft and silo the logic in the browser engines.

Post by goto11 » Sat, May 22, 2021, 11:37 AM UTC

hbn wrote: post #47

goto11 wrote: post #33

Looks great! Small pet peeve regarding tutorials: When learning a new technology I don't care about the headaches people had 20 years ago. My first concern is how I use the technology and what it can do for me. The section about layout starts with: " In the early days of the web, designs more complex than a simple document were laid out with elements. Separating HTML from visual styles was made easier when CSS was wi…

Nah, I think the history is important, especially for web development where modern tech stacks are technologies built on technologies built on technologies, and pretty much everything has to be backwards compatible. I've run into so many situations while learning web development where a design decision seems like nonsense until later when I learn about the history of how it evolved. First example that comes to mind i…