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

Learn CSS

web.dev

Post reply on HN
Print view View original

81–90 of 196 posts

Re: Learn CSS

#81

Post by nailer »

blacktriangle wrote: post #65
umut wrote: post #10

A viable alternative to all this is using tailwind, can't recommend it highly enough. When you pass the initial period where you feel like you're repeating yourself (1h max) it takes the nervousness out of your CSSing, it feels more like coding and less like schmoozing.. Just a happy user

I know it's been said before, but no Tailwind does not replace CSS. Tailwind replaces having to come up with a new semantic class name every time you need to style an element only to realize the actual semantics you picked were completely wrong. Tailwind is basically a cleaner way to do everything as inline styles.

Tailwind isn't quite inline styles (technical details) but yes, it replaces having to name 'login-box' with a copypasted set of styles that you can't change easily without massive regex work.

Re: Learn CSS

#82

Post by stupidcar »

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…

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 auto-updating browsers. Indeed, the purpose of this guide appears to be an explicitly "evergreen" guide to CSS, targeting only the feature set of modern browsers. If you're using grid, custom properties, conic gradients, etc. you're not writing backwards compatible code.

Re: Learn CSS

#83

Post by chrisfinazzo »

I never really "got" the float model for layout, so Grid is a welcome improvement these past few years. That said, this is still missing the one thing I've yet to find in any discussion of CSS.

How to appropriately size text. No -- for the 1,000,000th time -- I will not use Modularscale, which feels obtuse to me. Using some formula on a website that someone says works also feels arbitrary. Not to mention that the SASS implementation hasn't been touched in years.

With Grid, I felt like it was the first time I saw someone create a layout where it was obvious what was going on. I have yet to see something like this system - but for text sizing.

Re: Learn CSS

#84

Post by Jemaclus »

Am I the only person who sees a security error on this page? I'm on latest Chrome Version 90.0.4430.212 (Official Build) (x86_64) on Mac OS Big Sur

Screenshot: https://d.pr/i/gvj3fA

I've been trying to visit web.dev for days for various reasons, but I just get this and neither Chrome nor Safari will let me visit. But apparently a bunch of you can see the page, so I'm confused.

Re: Learn CSS

#85

Post by mixmastamyk »

johnsonap wrote: post #50
atsjie wrote: post #42

Earlier quoted context omitted.

Don’t agree. Historic context is important to understand legacy codebases, code examples in other resources and colleague’s behaviors.

Yup I think this is the most important piece of why new students should know about this, if they ever touch a legacy codebase.

Very few legacy codebases from the tabled 90s still using tables. Yes, a few exist but not that hard to grok.

Re: Learn CSS

#86

Post by astatine »

kaycebasques wrote: post #29

I'm the content lead for web.dev. Just wanted to give a quick shout out to the people who made this happen because it's not clear on the site. I think this is also useful information because you'll see that a lot of CSS experts we're involved in this project. Adam Argyle [1] and Una Kravets [2] created the podcast series. Una mainly drove the overall project to convert the podcasts into this written series. Adam prov…

It is interesting that this uses a podcast + text rather than what would have been a more conventional video based tutorial. The use of a podcast for describing something so fundamentally visual as CSS looks really unusual. I just started going through and came back here to note that it somehow seems to work well!

Re: Learn CSS

#87

Post by magicalist »

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…

> The section about layout starts with...This history lesson is not really relevant for newbies.

so folks know what we're talking about:

https://web.dev/learn/css/layout/#layout:-a-brief-history

It's four (pretty short) sentences that give a small amount of context pretty quickly and then links to another resource if you want to know more. I'd agree with you if it were a page or two's worth of history, but there's not much to find distracting here.

More importantly I think you're focusing on the newbies who are coming in with nothing but ignoring the newbies who are looking at existing code and a whole bunch of tutorials and stackoverflow answers out there written over the last two decades. Acknowledging that things have changed in CSS quite a lot in that time and pointing to where they can learn more means you don't distract the really new newbies much but you also don't confuse the other ones, leaving them with lots of questions ("but I read [this] about CSS...") and no idea where to look to reconcile some old advice ("use jquery for all styling!") with what they're learning now.

But it's also four sentences in the eighth chapter of a tutorial. It's not going to solve all confusion but it's also not a derailment.

Re: Learn CSS

#88

Post by Angostura »

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…

In my view, if you have made it through to module 8, you're not going to be put off at that point by a single paragraph explaining the historical context. If it was the introduction to the whole course, you might have a point.

Re: Learn CSS

#89

Post by blacktriangle »

nailer wrote: post #81
blacktriangle wrote: post #65

Earlier quoted context omitted.

I know it's been said before, but no Tailwind does not replace CSS. Tailwind replaces having to come up with a new semantic class name every time you need to style an element only to realize the actual semantics you picked were completely wrong. Tailwind is basically a cleaner way to do everything as inline styles.

Tailwind isn't quite inline styles (technical details) but yes, it replaces having to name 'login-box' with a copypasted set of styles that you can't change easily without massive regex work.

Until somebody has another similar box so they reuse login-box a bunch in your application, then you realize that they actually need to be customized and have to tear it all apart.

Tailwind doesn't make you copy and paste, it moves the reuse of styles out of CSS which sucks at managing reuse into whatever HTML building system which likely has some concept of reusable views.

Re: Learn CSS

#90

Post by lucas_codes »

chrisfinazzo wrote: post #83

I never really "got" the float model for layout, so Grid is a welcome improvement these past few years. That said, this is still missing the one thing I've yet to find in any discussion of CSS. How to appropriately size text. No -- for the 1,000,000th time -- I will not use Modularscale, which feels obtuse to me. Using some formula on a website that someone says works also feels arbitrary. Not to mention that the SAS…

What exactly about sizing text causes issues? Do you mean fluid/responsive sizing?

AFAIK, the best modern way to do it is `font-size: clamp(0.75rem, 1rem + 2vw, 3rem)` (the use of rem as well as vw is to not break zooming for accessibility)

Post reply on HN