Hacker News Reader

Comment by gingerlime | Hacker News Reader

slightly OT but can someone recommend how to learn CSS in 2023 for a backend web developer, who 30ish years ago grokked mainframe Assembly reasonably well (and since then developed in c, php, python, ruby, bash, etc etc)?

Can/do I start with tailwind? Do I start with old-school CSS or jump straight into flexbox? Do I need to care and learn about BEM, Sass, etc? Do I start with an empty page and build it? Do I need to copy a design? Can I jump into an existing page and tweak it?

Not trolling. It’s the kind of stuff that stumps me. Or am I just making excuses to myself why I can’t figure CSS out? (beyond tweaking margins, padding and maybe background-color and the real basics)

View on HN

I'd start with learning the layout model and the selector rules to get the mental model right. A lot of things clicked into place once I had a good mental model.

The main idea for layouts is that the CSS layout properties like width or margin are interpreted based on which layout mode you're in. Some html tags (<span>, <a>, <img>) default to the "inline" mode, where they are put side by side horizontally and wrap to the next line. Some html tags (<p>, <div>, <h1>) default to the "block" mode, where they are put one after the other vertically and "wrapping" doesn't mean anything. There's "inline block" which is inline on the outside but block on the inside. There's also "flex" and "grid" and "table" layouts, and their inline-on-the-outside variants. Each layout mode is useful for different things.

So when I'm frustrated about <span> not honoring width, or margin-auto not working for <img>, it's because the inline layout has word wrap. When there are 2.5 lines of wrapped content, things like width and margin work differently than in block layout mode. Instead of tweaking width/margin, I found it more useful to go back to understanding why it was not doing what I want, and then switch the layout mode to the one that matches my needs. Recommended: https://www.joshwcomeau.com/css/understanding-layout-algorit...

Selector rules are a pattern matching system to assign CSS properties to HTML elements. They also have priorities, so some selectors will have a higher or lower priority than others. These are sometimes useful, sometimes frustrating. I don't have a good reference at the moment, although I see that MDN has a page https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

I think of BEM, tailwind, sass, etc. as ways of using CSS once you know what CSS you want, rather than replacing having to know CSS. It's like how React is a way to constructing HTML, but you still have to know what HTML you want to construct. So I wouldn't start with them.

BTW it is a lot of fun to right click on a page, inspect the css, and start tweaking it!

Colt Steele is my favorite web dev teacher. He has taught web development in an actual in-person classroom environment, so I find he has a better understanding on how to get people to learn things than most online instructors.

He has a new for 2023 HTML and CSS course that is a fantastic intro to modern CSS. You can probably skip over the HTML section and jump straight into CSS. Even with skipping the HTML, there is 30+ hours of CSS content in the course. It regularly goes on sale for less than $15.

https://www.udemy.com/course/html-and-css-bootcamp/

Personally, I wouldn't mess with tailwind until you have the fundamentals of CSS sorted out. To use a PHP example...Whereas you're actively writing a lot of PHP when using frameworks like Laravel or Symfony, and can learn from that process, you're not really writing a lot of CSS with tailwind. You're mostly just adding classes to elements and supplementally adding some styles on top of that.

I would jump right into modern things like flexbox and the grid system as the old ways of floating are basically useless. I mean they still work, but I can't remember the last time I had to use a float to create new layout. Start with flex, as it's a bit more beginner friendly than grid is. I've been doing this for nearly 20 years now and I still struggle to wrap my head around grid sometimes.

You can ignore BEM until you've got the fundamentals sorted. BEM is just a clean standardized way to organize class/id names, it's nothing functional.

Sass helps streamline things a lot via nesting and variables to begin with. More advanced features can also be useful, but until you've got the fundamentals it may not be clear where those advanced features can be applied. And Sass requires substantial more initial setup than plain CSS (you'll need Webpack or gulp or something to turn the Sass into CSS). Not to mention that Sass's biggest draw is variables and nested styles, which CSS now supports natively (albeit with really weird syntaxes, imo). So I'd skip Sass for now.

And yes, you can jump into an existing page and tweak it. That's how I learned it initially. https://csszengarden.com is a good resource for that. It's the same basic HTML site with different CSS themes you can load. It's a good showcase of how powerful CSS is what you can do with it without touching the underlying HTML. Dev tools are very useful there as you can turn individual styles off, change their values, etc.

Lastly, I'd just start with a blank page and try to create a simple 2-column layout. Narrow left column with a basic navigation in it and a wide right column with a few paragraphs of text in it. Then build off of that -- add a header and a footer. See if you can get the header to "stick" while you scroll down the page, etc.

https://web.dev/learn/css

I haven't read each section, but just from the outline this appears to cover everything you need to know to do 99.9% of modern CSS development. (And then some, for good measure... I don't think I've ever used blend modes, for instance.)

I would probably start by opening the browser dev tools on web pages and use inspect element to see how an element in the page has been made to look the way it is. You can edit properties to see what effect they have when changed.

The domain of styling html is so large that there's no chance of learning everything in theory then applying it, I think it's best to learn by doing.

I’ve been doing that for over a decade, without making tangible progress.

You've probably accumulated a lot of relevant html knowledge which will help you.

I presume you have some css-related projects/tasks in mind that you'd like to be able to tackle yourself. I would pick one of those and jump in at the deep end. Although a small goal like restyling something that already works is probably better than starting from scratch.

For a completely abstract task, you could try developing a stylesheet for markdown html output.

Vanilla CSS is good enough (and browser support consistent enough) now that you don't need to use any compilers/frameworks to get started.

If you find yourself struggling for design inspiration, try to re-produce an existing design without seeing how they did it.

Do not start with Tailwind. If you have no grasp of CSS beforehand, Tailwind will be completely incomprehensible. At the basic level, Tailwind is giving you shorthand CSS properties. You need to learn CSS first.

Reply on news.ycombinator.com