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

101–106 of 106 posts

Re: Learn CSS layout the pedantic way (2015)

#101

Post by filleduchaos »

nicoburns wrote: post #89
filleduchaos wrote: post #40

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

Definitely! When I say it's the point of flexbox and grid, I mean that they remove the need for the dev to do the manual width and bounds calculations (much like being able to just say how items should be aligned in both axes removes the need to do margin or positioning shenanigans). But it was all very possible with basic flow layout

Re: Learn CSS layout the pedantic way (2015)

#102

Post by nsinreal »

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?

Because understanding of CSS doesn't helps you in the most cases.

Just return to the ages when we needed to support Chrome+Safari+Firefox+IE+custom mobile browsers (it wasn't long ago). All those engines had so many bugs. Understanding CSS won't help you deal with cross-browser compatibility. This is why we have things like caniuse.com and autoprefixer.

Go a little more back in time. CSS doesn't have a lot of capabilities. Some things can't be achieved at all. Other things can be done quickly via mix of CSS and JS code to update layout; otherwise you need to spend a week to achieve something worse with pure CSS. Even now, we have things like react-motion, react-transition-group - libraries to solve cases that CSS transitions&animations can't solve. (Should we talk about DND?)

In past CSS didn't had Flex-layout widely adopted. This is why there were JS libraries solving layout stuff. We still have libraries that provide list virtualization. Even with the CSS `contain` property (which arrived in 2017 and wasn't widely adopted even in 2021), working with DOM is not cheap.

We didn't have calc() and CSS variables. We still don't have CSS nesting widely adopted. This is why we have LESS & SASS. (Should we talk about CSS modules?)

And ofc, CSS is pretty useless for quick prototyping, you need a UI kit. UI kit means a conceptually different approach than using raw CSS - you don't need to do CSS a lot, but you need to learn UI kit a lot.

Finally, if you are building a product, you deal not only with styling. It's not a landing page, it's not a one week hobbie project -> you need to code a lot. If you are bad at styling, you are bad at ~10% (maybe ~20%) of your work. And considering all the things that we said before, if you are bad at understanding CSS, you are bad at ~1% of your work.

To sum up. You can make beautiful products with little CSS knowledge because CSS alone is useless.

Re: Learn CSS layout the pedantic way (2015)

#103

Post by nsinreal »

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…

There are so much changes for the last 15 years. You don't need to learn all that path. You need to learn modern web development from scratch, ignoring history.

Right now, modern web development is:

- Yarn/PNPM as package manager

- TypeScript as a programming language

- React as UI framework/library

- React Router for navigating multiple pages

- UI kit (I personally have good experience with React Material UI - https://mui.com/; there is also https://tanstack.com/)

- Something to deal with fetching data (tanstack query client is cool, provides caching out of the box)

- Something to deal with forms if you have that

- Maybe a store for managing data when it's too complex (see https://redux-toolkit.js.org/api/createSlice)

- And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/; maybe https://vitejs.dev/) - google for templates.

I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.

Re: Learn CSS layout the pedantic way (2015)

#104

Post by nailer »

dkdbejwi383 wrote: post #63
nailer wrote: post #36

Earlier quoted context omitted.

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

Personally I find grid more complex - but perhaps I just haven't used it as much compared with flexbox. The vast majority of the time, I find that elements within a particular component (here meaning chunk of UI, not a React/Vue/Svelte etc module) naturally fit along a single axis.

There’s nothing requiring you to have multiple rows or columns in your grids.

Re: Learn CSS layout the pedantic way (2015)

#105

Post by cxr »

danielvaughn wrote: post #46
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…

Any introduction to HTML/CSS really should explain the fact that when these technologies were created, they were solely meant to render documents online. It was basically created to be like a Microsoft Word but for files on another person's computer. So most of the early properties (like float) were for typographic layout.

> It was basically created to be like a Microsoft Word but for files on another person's computer

Or like WriteNow, even.

Re: Learn CSS layout the pedantic way (2015)

#106

Post by temporallobe »

rzmmm wrote: post #53
temporallobe wrote: post #50

I develop a lot UI apps (mostly Angular) and these days I just use a framework like Bootstrap or Foundation. The myriad of layout options in pure CSS is overwhelming and mind boggling, especially when it comes to responsive design. I have tried using pure CSS but find myself writing lots of boilerplate code and coming up with amounts to a mini framework. Unless you’re designing a custom bespoke designer web site, I d…

Newer CSS features like flexbox, grid and media queries were added to reduce the need for frameworks like bootstrap.

Frameworks still do a lot of the grunt work for the responsive breakpoints.
Post reply on HN