Hacker News Reader

Comment by neontomo | Hacker News Reader

I appreciate the simple way CSS is written, but I find myself struggling with it quite a lot even after many years of actively using it. I think there may be something in the way it's been designed that is preventing me from having the moment where it all clicks. I want to be able to think, "ohh that's how that works, now the rest is falling into place", but instead I'm hacking and slashing and failing forward until something looks the way I want. Every time. I don't know for sure if that's me not being smart enough or if there's some design flaw that's preventing a clear mental model. If anyone has any good resources for that I'd love to see it.

View on HN

This started improving for me recently when I spent more time really learning flexbox and flexgrid. They are part of CSS so no installs needed. It’s a different way of thinking but I’m finally good enough with flexbox that I can tell when I need it and make productive use of it. Knowing these patterns makes a difference for me, since now I can assemble the blocks better than before when I’d just try mostly random css without any guiding principles.

Flexbox froggy helped a lot with some practical experience that translated fairly well to my regular work.

https://flexboxfroggy.com/

There are other games like this that I haven’t gotten to yet, including one for flexgrid. Once I clear all the levels in flexbox froggy I’m going to try the flexgrid game.

Then after that I’m going to spend time with bootstrap and tailwind since the last time I really used them was back in my more junior days when I barely knew anything at all about css.

My advice is to just learn a framework and let other people deal with the details. This article makes it seem like CSS is as easy to work with as pencil and eraser. But a lot of the complexity is arbitrary due to either history or fashion

The optimist in me hopes that one day the web is built on HTML, vanilla JS and CSS only (or languages comparable), but it's so good that no frameworks are needed. Until then, you may be right.

That is my favorite stack. :) I call it pure JS but I like vanilla JS too.

CSS is super powerful and I love how much you can do with it. I’m still scratching the surface, too. I’ve been using it for years for common things as a full-stack dev but it’s only really the last six months that I’ve really begun to stretch myself with it.

The power it has for animations is impressive too, for example. I spent a lot of time on just that and flexbox and flexgrid and it made me go from hating CSS to really liking it.

> I’ve been using it for years for common things as a full-stack dev but it’s only really the last six months that I’ve really begun to stretch myself with it.

I'm only now dipping my feet into front-end development, and I'm avoiding all frameworks[1], but to play with CSS I made this: https://rundata.co.za/~lelanthran/JustTryIt/

It's incomplete, it's not good for testing layouts, etc ... but it was useful to me when I didn't know what the defaults did.

(I should perhaps rewrite it now to be more complete and less cruft-filled - this was written when I knew less about JS and CSS than I do now).

[1] No special reason - there are too many, and most of them seem bloated for what I need. I'm sure react solves real problems, but I find it's shorter to solve my problems using whatever I've already written and understood than learning a whole new framework.

Hey, this is really cool! Part of the struggle is definitely getting a feedback loop set up so that people can see what the css actually does. Especially when you’re trying to build a product at the same time. This is neat because it could let me see the benefit of some styling in isolation pretty easily.

Enjoy the rewrite! I love that feeling of rewriting something with new knowledge and finding all kinds of gains while doing so.

Learning the order of padding/border/margin and how they interact with each other and width/height was the tipping point for me. There used to be a good article on mdn for it, but their introductory page now looks like a bad replacement to me: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_mod...

If nothing else, the image at the top is more confusing than it needs to be, the old one was much better. It didn't used to refer to edges, but the margin/border/etc itself, which is what you're actually dealing with in CSS.

The box model combined with the box-sizing page makes probably the biggest WTF people have with CSS pretty obvious IMO (why "width: 100%" is bigger than 100%): https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

If the reason for that makes sense to you, I think that makes you well above average among frontend devs. All the new stuff like flex and grid is still built on the box model after all.

My aha moment in CSS was learning the rules of specificity, when one rule overrides another. I had always assumed on some level that later rules override earlier ones, which is true, but only part of the story.

I will get downvoted but have you used Tailwind CSS ? Makes writing frontend way easier for me now. (still struggle at it but less)

I'm really confused about what's meant to be good about Tailwind.

I recently ran create-next-app with Tailwind, and the default example output page has several divs with 600+ characters of tailwind class names. Each! Without word wrap most of the page's style information is way off the right side of the screen, and with word wrap the page source is mostly class names. Is this how tailwind pages are meant to look?

Also, with tailwind the page's style information is all in class names - which are plaintext, with no syntax highlighting or code hints or linter errors. Do people using tailwind maintain styles that way, or is there a quasi-mandatory plugin or something?

The only obvious benefit I see for tailwind is that style rules are tied directly to the markup they modify. But if I use any SFC framework like vue or svelte, I can have scoped CSS with the style rules right next to the markup, and I also get legible style rules, code hints, CSS variables, and everything else. What is it that tailwind makes better?

This article explains the reasoning pretty well:

https://adamwathan.me/css-utility-classes-and-separation-of-...

Hmm. Thanks for the link; I can see where that argument comes from.

But doesn't that entire line of thinking disappear if one just uses scoped CSS inside components? Everything in that link assumes that all CSS rules are global, and it runs through BEM and then tailwind as a way to avoid putting component-specific rules in the global CSS file.

But if you just use a frontend framework with SFCs, you can treat each component as a module with its own local style rules. If there's no global CSS file to edit, don't BEM and Tailwind become irrelevant, since the problem they solve no longer exists?

That's exactly my perspective. Tailwind tries to make inline CSS workable, but there are so much better options in available in a frontend frameworks.

Some people have just completely internalised the "CSS bad" mindset, and for them, literally anything is better.

Yeah, actually! I'm using it at my current internship. I like it because the syntax is shorter and is sometimes reworded to be clearer, but there's still some flaws in Tailwind. To use the shorter stuff, like mt-8, you have to first know that mt stands for margin-top, which means it's not replacing knowing CSS to some degree first. Writing my styling inline is also not amazing. Working with their documentation is a breeze though.

Reply on news.ycombinator.com