Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS layout the pedantic way (2015)

book.mixu.net

Post reply on HN
Print view View original

81–90 of 106 posts

Re: Learn CSS layout the pedantic way (2015)

#81

Post by blowski »

tdudhhu wrote: post #64
yojo wrote: post #51

Earlier quoted context omitted.

It is, after all, HyperText Markup Language. The modern app-based web is incredibly far out of scope of the initial vision of “text documents that link to other text documents.” CSS and HTML are loaded with legacy warts that can never be removed without breaking backward compatibility.

Float is still relevant. For example if you have some text that must flow around an image that is placed in a corner.

I think the parent comment agrees with you. It’s the use of float to, for example, position menus on the page which is no longer relevant.

Re: Learn CSS layout the pedantic way (2015)

#82

Post by Trufa »

shubhamjain wrote: post #27

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and contai…

> I have been a web developer for 10 years, and I still feel out of depth about CSS.

What do you mean by this? I've been dealing with CSS for even more years than that and can't for the life of me remember if its align-items or justify-content cause I won't even try to.

As soon as I do flexbox I open https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid I remember even less! But I still don't feel out of depth because I can get it to do what I want easily enough with a couple of scoffs and WTFs here and there.

I've heard this about CSS so many times, but honestly, I find it kind of easy to do get the layout I want without too much effort most of the times, I just don't remember CSS in the same way I remember how to do JS.

Re: Learn CSS layout the pedantic way (2015)

#83

Post by LegionMammal978 »

cantSpellSober wrote: post #19

> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS. `float` is more of a typographic tool. If this article calls itself pedantic, it needs…

A large portion of Chapter 1 (https://book.mixu.net/css/1-positioning.html#float-positioni...) is dedicated to the intricacies of floats and their special flow, explaining how their behavior can be carefully reused and adapted for alternative purposes. I'd say that's as pedantic as anything can be, especially given the lack of flexbox/grid layout when it was written.

Re: Learn CSS layout the pedantic way (2015)

#84

Post by brikym »

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.

In addition:

- Flexbox froggy is the best way to learn flex.

- Before you even start writing anything find someone elses css-reset rules as that'll replace years of legacy backwards compatible behaviour with some sane defaults. (e.g. https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...)

Re: Learn CSS layout the pedantic way (2015)

#85

Post by patternMachine »

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.

Learn page layout and graphic design principles. A lot of CSS is spec'd to support these disciplines and it will make a lot more sense if you are familiar with them. The main reason developers have so much trouble with CSS is that they don't understand the problems it is trying to solve.

Re: Learn CSS layout the pedantic way (2015)

#86

Post by [deleted] »

cantSpellSober wrote: post #19

> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS. `float` is more of a typographic tool. If this article calls itself pedantic, it needs…

[deleted]

Re: Learn CSS layout the pedantic way (2015)

#88

Post by nicoburns »

shubhamjain wrote: post #27

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and contai…

If you're interested in CSS layouting, consider learning Flexbox and then CSS Grid first. These are both relatively straightforward with good documentation and relatively few quirks (esp. grid).

You don't really need flow layout at all these days. And you can certainly skip floats and table layouts entirely (use them only for their originally intended purpose of floated images within textual content and literal tables).

Re: Learn CSS layout the pedantic way (2015)

#89

Post by nicoburns »

filleduchaos wrote: post #40
rchaud wrote: post #32

Earlier quoted context omitted.

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, stac…

> 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.

Flexbox and Grid? They're certainly helpful, but not required! I remember trying to achieve a responsive layout in IE6 that IIRC only had limited support for min-width/max-width. It was possibly even back then, although I can't remember how it was done off the top of my head.

Re: Learn CSS layout the pedantic way (2015)

#90

Post by mixmastamyk »

philsnow wrote: post #78
shubhamjain wrote: post #27

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and contai…

My perennial problem with frontend work is that all the articles are written for an audience of people who have been keeping up with the state of the art for the last 15 years. The first time I wrote actual frontend things in exchange for USD, I was generating "DHTML" (my fingers stumbled over even typing the abbreviation because it's flushed so far out of my muscle memory cache) directly from perl. I know frontend s…

Search for the blog posts “X for Dinosaurs.” Already getting old but will get you up to 2018.
Post reply on HN