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

71–80 of 196 posts

Re: Learn CSS

#71

Post by dhimes »

blacktriangle wrote: post #62
dhimes wrote: post #41

This looks good. I've been using mdn mostly; but I usually go deep into CSS for a bit then leave it for long periods of time. That said, what has replaced SASS? I'm struggling to find a preprocessor that allows nesting/grouping etc. Or is that built into CSS by now? Being able to nest CSS was a game changer for me in terms of css organization.

I'd say that "nesting is bad" has replaced SASS. Nesting encourages long selector chains which are generally a bad practice. That CSS makes this painful is a nice reminder to only use long selector chains where necessary.

I see. That just goes against the way I naturally think, unfortunately— which is why I thought SASS was such a great breakthrough. I do understand it, though, because when I want to modify something in some over-written hunk of garbage CSS it is a real pain to try to get the selector that actually works (thank god for dev tools).

Re: Learn CSS

#72

Post by goto11 »

watwut wrote: post #52
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…

Specifically with CSS, if you omit this, the first logical question of anybody who attempts to learn it is "wtf, why does it work in such a stupid way". Basically, historical context helps to cool down natural negative reaction.

I think it is more helpful to explain why thinks work the way they do.

Re: Learn CSS

#73

Post by dsego »

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…

Funny, this very page you're commenting on uses tables for layout.

Re: Learn CSS

#74

Post by commandlinefan »

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…

> I don't care about the headaches people had 20 years ago

Hard disagree. Especially with technology, what we have today doesn't usually make much sense unless you compare it with what we used to have: everything started out the simple, but naive way, and evolved out of combat-tested lessons learned to what it is right now. If you don't know what those lessons were, a lot of the design decisions that went into what you see will seem mysterious and, possibly, pointless.

Re: Learn CSS

#76

Post by blacktriangle »

dhimes wrote: post #71
blacktriangle wrote: post #62

Earlier quoted context omitted.

I'd say that "nesting is bad" has replaced SASS. Nesting encourages long selector chains which are generally a bad practice. That CSS makes this painful is a nice reminder to only use long selector chains where necessary.

I see. That just goes against the way I naturally think, unfortunately— which is why I thought SASS was such a great breakthrough. I do understand it, though, because when I want to modify something in some over-written hunk of garbage CSS it is a real pain to try to get the selector that actually works (thank god for dev tools).

One of the challenges with CSS is that it has so many ways to do the same thing, and it needs that because there are so many different workflows.

If you are in an environment where you have 0 control over how the HTML is structured I can see where long selectors are helpful, but when you do have full control over the HTML they are a huge anti-pattern.

Re: Learn CSS

#77

Post by nailer »

onion2k wrote: post #54
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…

This history lesson is not really relevant for newbies. If you're working on a new project that's true. If you're working on an old project, and bringing it up to date, then understanding the code that's there is very useful. That starts with understanding how things were in the past, and why people did things that might seem a bit crazy (eg spacer.gif).

You still need spacers in 2021 to add bottom padding to CSS grid:

https://github.com/w3c/csswg-drafts/issues/129#issuecomment-...

Re: Learn CSS

#78

Post by nailer »

Oddskar wrote: post #20
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

This is like saying an alternative to learning how to cook is to sustain yourself on takeaway. Tailwind might be nice, but most projects will require in-depth knowledge about CSS.

People absolutely do use tailwind as an alternative to understanding CSS. Having seen and worked on projects in tailwind, I feel like that's it's primary purpose.

Go on Twitter and look at the Tailwind community - they see CSS as a doomed, awful language and Tailwind as the thing that makes it pleasant. They're not CSS developers. They're people actively trying to avoid being CSS developers.

Re: Learn CSS

#79

Post by astatine »

blacktriangle wrote: post #57
astatine wrote: post #9

I struggle with CSS. I am not sure it's CSS that's proving difficult or the ability to design anything even remotely presentable. I suspect my struggles are more to do with the latter. Looking at good designs and trying to derive a variant that works for me turn into incredibly frustrating exercises. Let me see if this content helps.

I'd second doing this tutorial. I think what they have is terrible for somebody brand new to CSS, but for a developer who has worked with CSS and still not quite put it all together, this tutorial is great. For me one of the keys to "getting" CSS, and I think is the hardest, worst part of CSS, is understanding all of the implicit contexts that are generated. For example, elements have positioning roots. Nowhere does…

Thanks for the details. Will definitely go through this tutorial

Re: Learn CSS

#80

Post by goto11 »

atsjie wrote: post #42
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…

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

Sure, but that is an advanced subject. Don't put it before explaining what the technology actually does!
Post reply on HN