4 ms·

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 so

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.

ulizzle 3y ago
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
- neontomo 3y ago
  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.
  - GravityLab 3y ago
    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.
    - lelanthran 3y ago
      > 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/ 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.
      - GravityLab 3y ago
        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.
shmde 3y ago
I will get downvoted but have you used Tailwind CSS ? Makes writing frontend way easier for me now. (still struggle at it but less)
- neontomo 3y ago
  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.
- fenomas 3y ago
  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?
  - 000ooo000 3y ago
    Some people have just completely internalised the "CSS bad" mindset, and for them, literally anything is better.
  - wauter 3y ago
    This article explains the reasoning pretty well: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
GravityLab 3y ago
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/ 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.
rendall 3y ago
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.
Izkata 3y ago
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_model/Introduction_to_the_CSS_box_model 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 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.

ulizzle 3y ago

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

neontomo 3y ago
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.
- GravityLab 3y ago
  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.
  - lelanthran 3y ago
    > 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/ 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.
    - GravityLab 3y ago
      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.

shmde 3y ago

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

neontomo 3y ago
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.
fenomas 3y ago
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?
- 000ooo000 3y ago
  Some people have just completely internalised the "CSS bad" mindset, and for them, literally anything is better.
- wauter 3y ago
  This article explains the reasoning pretty well: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

GravityLab 3y ago

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/ 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.

rendall 3y ago

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.

Izkata 3y ago

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_model/Introduction_to_the_CSS_box_model 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 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.