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

61–70 of 196 posts

Re: Learn CSS

#61

Post by blacktriangle »

swiley wrote: post #7
hmoy wrote: post #2

I've always found CSS infuriating to use when working with it (albeit not often). This looks like a clean and easy to follow course so will be one for me to look at over the weekend.

I think most web users wished web devs understood CSS better (even if they don't know what it is.) I'd be willing to bet half the stuff things like React are used to do could be accomplished much better with a small amount of CSS and probably no javascript at all.

I've gone down that rabbit hole of pure-CSS components, frankly its a worse maintainable nightmare than using JS where appropriate.

Re: Learn CSS

#62

Post by blacktriangle »

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.

Re: Learn CSS

#63

Post by mumblemumble »

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…

It's also useful to be able to know what you're looking at when reading code that others have written.

Re: Learn CSS

#64

Post by SamuelAdams »

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've worked on a lot of legacy codebases that implemented some of these older design patterns. Understanding the history is essential to knowing what to replace it with.

Re: Learn CSS

#65

Post by blacktriangle »

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.

Re: Learn CSS

#66

Post by jerrygoyal »

raspasov wrote: post #13

In terms of Flexbox, this guide in the React Native documentation is BY FAR the best guide I've seen anywhere. It tells you just the right amount of things you need to know to be productive. https://reactnative.dev/docs/flexbox It's not React Native specific. It works for web-based CSS as well.

I often find this flexbox cheatsheet handy https://flexbox.malven.co/

Re: Learn CSS

#67

Post by Izkata »

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.

CSS and Javascript both. Forget legacy codebases, people seem to forget how much legacy documentation, tutorials, and Q&A is out there confusing newbies who don't have the context to know what's no longer relevant or accurate.

In answering questions from actual newbies completely new to this, I was a bit surprised at just how much I took for granted because I was around for the historical context.

Re: Learn CSS

#68

Post by cik »

Thank you. I have this ongoing goal of learning to front-end. JavaScript has always made sense. Frameworks change, but it generally follows CS principles in a way that I can understand. But CSS just breaks my head. This looks like CSS broken down in a way that I can digest it. Thanks again!

Re: Learn CSS

#69

Post by dhimes »

frosted-flakes wrote: post #53
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.

Nesting is still not possible in regular CSS. In fact, it's the only reason I still use Sass—I don't use any of Sass's other advanced features.

The function stuff is pretty sweet. EDIT: By that I mean "mixins"

Re: Learn CSS

#70

Post by hu3 »

mkoryak wrote: post #48
hu3 wrote: post #32

Earlier quoted context omitted.

This is like saying that learning JQuery is an alternative to learning JavaScript.

Except that learning JQuery is an alternative to learning the native javascript DOM API.

DOM API? perhaps

JavaScript? no

Post reply on HN