Comment by taphangum | Hacker News Reader

Comment by taphangum | Hacker News Reader

Parent Full thread

The hard parts are organization, maintenance, coming up with a unified strategy, playing CSS whack-a-mole when you change HTML, deciding where to define what, finding where you defined what, etc. The garden demonstrates none of that.

100% this.

The moment I started to see HTML and CSS as a holistic system of layout construction, rather than as simply two separate but complimentary technologies, my productivity in both skyrocketed.

'Bugs' in my CSS became infinitely easier to not only find, but also solve. And the benefits of tools that both unified and abstracted layout construction, like Tailwind, became immediately obvious.

Shameless plug: I talk more about a lot of these mindset shifts and how they've helped me finally feel like I truly understand CSS in a book I'm working on called "How To Debug CSS" [1].

It goes over not only the mindset shifts that have helped me gain a decent level of mastery over CSS, but also shows you how to solve the 50+ most common issues that you'll come across when developing with it. Like when you have an overflow on your page for example, and have no idea what's causing it.

[1] - https://gumroad.com/l/Debbg/z823cp8

I don’t personally mind the plug, but please give something concrete to help us understand what you mean when you say “holistic system of layout construction” and others.

Happy to expand.

One of the concepts I share in the book is on the idea of viewing HTML as a relational structure. Like a database. And how viewing it in that way helps you to better understand positioning (even with CSS). Because re-framing it in this way automatically gets you thinking about your elements, and the CSS that binds them, more holistically.

The most common way that people trip themselves up when working with HTML and CSS is by becoming myopic with regard to the specific section or element they're dealing with, and not seeing the whole forest so to speak. Making them unable to see why a problem in their CSS is happening.

Or to know what they need to do to create a certain thing in their layout.

A lack of a holistic understanding (how elements relate to other elements, and how CSS fits into this), and thereby view is what causes this.

My two latest articles goes into more detail re this:

https://planflow.dev/blog/how-to-get-better-at-css

https://planflow.dev/blog/what-makes-css-hard-to-debug

I hope you understand when I say that your reply still does not contain anything concrete. Nor for the most part do the articles you posted.

I put some significant time trying to understand exactly what you’re going for and it seems like you’re trying to help people shift their high-level thinking, but it’s a lot of words and almost nothing to get my hands on. As someone who needs to try and work with things in order to properly understand them, this material just does not give me any “meat”.

I appreciate the feedback. The reason why it feels like this is because I haven't included any real CSS based examples here (which I do in the book) of what I mean.

These are not easy concepts to digest without visual examples. I will try to edit my posts with some concrete examples to get them to be closer to the book.

Awesome. If/when you do, try to reply here as I’m genuinely curious.

Reply on news.ycombinator.com