Learn CSS layout the pedantic way (2015) • Hacker News Board

Re: Learn CSS layout the pedantic way (2015)

#31

Post by dylan604 » Thu, Feb 29, 2024, 2:44 PM UTC

codethief wrote: post #12

arcbyte wrote: post #11

> This is a set of chapters about CSS layout for people who already know CSS. Which seems like a small market, I admit. This was like a gut punch. Is this why software is so terrible? So many people just graduated bootcamps and never learned anything else? How can you do web development or even React if you don't understand CSS?

> How can you do web development or even React if you don't understand CSS? I wrote my first line of CSS more than 20 years ago, have dug my way through CSS specs and browser quirks a countless number of times, write a ton of CSS in my day job, and even I wouldn't claim to really understand CSS. There are just too many hidden rules, too many edge cases, to really ever be certain you have now understood everything the…

> he writes about CSS on a regular basis, so I'm sure he understands a great deal about it.

Don't be so sure. The world is full of people that excel at the fake it til you make it skill. As long as you say it loud and full of confidence, people will just tend to accept whatever you're saying. Anyone that comes along and challenges will just be dismissed as a hater or similar. In software dev, these types tend to migrate upwards into management

Re: Learn CSS layout the pedantic way (2015)

#32

Post by rchaud » Thu, Feb 29, 2024, 3:00 PM UTC

avianlyric wrote: post #13

Pathogen-David wrote: post #5

Earlier quoted context omitted.

Yeah, according to https://book.mixu.net/ this was written in 2015, at nine years old I'd be worried about this not being super useful for modern CSS.

The core of CSS, and principles that new CSS features follow, haven’t really changed in decades. It’s just been built upon and refined. Given these articles are looking an underlying principles of the CSS layout process, I wouldn’t worry about it being out of date. Everything it covers certainly hasn’t changed (because so many websites would be very broken if they had), and new CSS will be built on the fundamental pr…

The core of CSS absolutely has changed. Unless you're building a mobile-only site, you're likely using media queries today to target multiple viewport sizes, which wasn't on anybody's radar in 2006.

Much of these changes in CSS have simply beeen obscured by improvements in cross-browser compatibility and use of layout frameworks that hide all the complexity behind simple class names.

In the 2000s, sites were built with the element to simulate a grid.

In the 2010s, it changed twice, first by using floats and CSS reset methods to create responsive columns. Then that went away in favour of Flexbox and Grid, which now have wide browser support.

If you're building sites for IE6 compatibility, then things probably haven't changed much.

Re: Learn CSS layout the pedantic way (2015)

#33

Post by rchaud » Thu, Feb 29, 2024, 3:03 PM UTC

lesser_value wrote: post #3

What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.

Best way to learn is to build sites with experimental layouts. You'll get stuck and thats when you'd want to look around the documentation or Stack Overflow. MDN docs are the incredibly dry, so avoid them until absolutely necessary.

Re: Learn CSS layout the pedantic way (2015)

#34

Post by maroonblazer » Thu, Feb 29, 2024, 3:03 PM UTC

lesser_value wrote: post #3

What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.

They're not free, but Jen Kramer's CSS courses on Frontend Masters are very good, and are pretty recent.

https://frontendmasters.com/teachers/jen-kramer/

I attempted CSS back when you had to float anything/everything for positioning and found it extremely confusing. I recently picked it back up, and flexbox and grid make it sooo much easier. I feel like I'm finally getting it.

Re: Learn CSS layout the pedantic way (2015)

#35

Post by nailer » Thu, Feb 29, 2024, 3:05 PM UTC

> Chapter 3:

> margin collapsing > negative margins

This article prioritises understanding older layout techniques which has some value when dealing with a legacy code base, but should be avoided on new projects

Re: Learn CSS layout the pedantic way (2015)

#36

Post by nailer » Thu, Feb 29, 2024, 3:06 PM UTC

sesm wrote: post #25

The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.

grid is also a sensible default. Unless you actually want flexing, there is no reason to use flexbox and its more complicated syntax.

Re: Learn CSS layout the pedantic way (2015)

#37

Post by nailer » Thu, Feb 29, 2024, 3:09 PM UTC

avianlyric wrote: post #13

Pathogen-David wrote: post #5

Earlier quoted context omitted.

Yeah, according to https://book.mixu.net/ this was written in 2015, at nine years old I'd be worried about this not being super useful for modern CSS.

The core of CSS, and principles that new CSS features follow, haven’t really changed in decades. It’s just been built upon and refined. Given these articles are looking an underlying principles of the CSS layout process, I wouldn’t worry about it being out of date. Everything it covers certainly hasn’t changed (because so many websites would be very broken if they had), and new CSS will be built on the fundamental pr…

I worry that focusing on old layout techniques and hacks to get them to work, will propagate old layout techniques and hacks to get them to work.

Re: Learn CSS layout the pedantic way (2015)

#38

Post by filleduchaos » Thu, Feb 29, 2024, 3:10 PM UTC

sesm wrote: post #25

The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.

Table is not the oldest CSS layout system. That would be flow layout, which oddly enough doesn't appear in this list at all.

Re: Learn CSS layout the pedantic way (2015)

#39

Post by mananaysiempre » Thu, Feb 29, 2024, 3:12 PM UTC

sesm wrote: post #25

The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.

> CSS layout [...] has 4 different layout systems: table, the oldest one, still used for email [...].

Nooot exactly? Literal HTML table markup is indeed probably the oldest way of laying parts of webpages side by side and is still used for email, but that has little to do with CSS.

In CSS, you have display: table and related values, but IIRC they were less usable on old IE versions than floats and received fairly limited use; certainly not nearly as much as literal non-semantic tables. I haven’t noticed them receive much use on the modern Web, either, and I don’t really know why—perhaps the requirements on the surrounding markup are too stringent (there’s no way to reorder things, for example, and if you need multiple rows you’ll need to include some sort of elements in your HTML to play that role).

Re: Learn CSS layout the pedantic way (2015)

#40

Post by filleduchaos » Thu, Feb 29, 2024, 3:16 PM UTC

rchaud wrote: post #32

avianlyric wrote: post #13

Earlier quoted context omitted.

The core of CSS, and principles that new CSS features follow, haven’t really changed in decades. It’s just been built upon and refined. Given these articles are looking an underlying principles of the CSS layout process, I wouldn’t worry about it being out of date. Everything it covers certainly hasn’t changed (because so many websites would be very broken if they had), and new CSS will be built on the fundamental pr…

The core of CSS absolutely has changed. Unless you're building a mobile-only site, you're likely using media queries today to target multiple viewport sizes, which wasn't on anybody's radar in 2006. Much of these changes in CSS have simply beeen obscured by improvements in cross-browser compatibility and use of layout frameworks that hide all the complexity behind simple class names. In the 2000s, sites were built wi…

> The core of CSS absolutely has changed. Unless you're building a mobile-only site, you're likely using media queries today to target multiple viewport sizes, which wasn't on anybody's radar in 2006.

These two sentences don't really follow from each other? Gaining additional features isn't necessarily the same thing as the core of a technology changing. The actual core of CSS would be things like its box model, stacking contexts, specificity, etc.

And ironically you can in fact achieve responsiveness without using media queries. That's arguably the entire point of more sophisticated layout algorithms like flexbox and grid.