[deleted]
Ask HN: How to bypass learning CSS?
41–50 of 59 posts
Re: Ask HN: How to bypass learning CSS?
#42Learn it. It takes an afternoon to learn the modern foundations. Box model, flex box and CSS grid. That’s it. Google the rest as you come upon use cases.
Why has CSS been a constant on the web when we churn through everything else? Be curious.
Re: Ask HN: How to bypass learning CSS?
#43Although I considered myself good at CSS, but I won't recommend you just learn it like everybody else suggesting in this thread - just build your MVP and pick up things when necessary. Here is my recommendation:
1. You're talking of MVP so I assume the UI doesn't have to be glamorous. Most of the elements you are going to leverage could be UI libs like Material-UI[0] or Ant Design[1].
2. Then, other than components, sometimes you do need some CSS handle layout and such. My choice would be CSS frameworks like Tailwind[2]. Honestly, to make good use of Tailwind sometimes require good CSS skill, but I believe people could still try Adhoc problem-driven approaches - you'll learn things along the way.
In case CSS makes you wonder after the MVP, you could try to expand styles you have been using in Tailwind, to see what's the corresponding CSS is and you'll learn.
(There's also a macro version of Tailwind named twin.macro[3] which fits React better IMO.)
(Tailwind has their official UIs (not free) [4] but I never tried them, it might work for you if you don't care about UI)
[0] https://material-ui.com/ [1] https://ant.design/ [2] https://tailwindcss.com/ [3] https://github.com/ben-rogerson/twin.macro [4] https://tailwindui.com/
Re: Ask HN: How to bypass learning CSS?
#44CSS doesn't have to be boring. Some people really like using it. If you don't want to use css, your choices are pretty much the following: - use unstyled html - use a component library (although any customization is going to require css) - use a framework that has utility classes. Again it's hard to imagine never writing a line of css. Honestly, css is a fundamental web technology. If you want to build for the web yo…
I understand... is there any way you can make CSS less boring?
There are lots of things on the web that gamify aspects of css: FlexBox Froggies comes to mind.
I don't really see it as boring to begin with honestly. I like building UIs, so I don't think it's boring to learn to build UIs.
Re: Ask HN: How to bypass learning CSS?
#45You can skip a lot of the dread by using a UI toolkit like TailwindCSS, Bulma, or others.
Watch some videos on how they are used and learn from them. Check this channel out:
https://www.youtube.com/c/TailwindLabs
But, if you want to be a web developer, sooner or later you'll have to grok CSS.
Re: Ask HN: How to bypass learning CSS?
#46Flexbox has made stuff a lot easier for me. I had this bookmarked while learning : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I second this comment. The above tutorial and link is a very good reference, and I believe that flexbox these days is really the only thing you'd need to learn to position things with CSS. And other than positioning, I feel that CSS for styling is much simpler and straightforward.
Re: Ask HN: How to bypass learning CSS?
#47Hire someone else to do it, then yes.
Otherwise,no
Re: Ask HN: How to bypass learning CSS?
#48I am also in the position of not loving CSS but having to use it here and there when I build my own thing. However I'd say that the more I use it the more tolerable it becomes, and I have even begun liking certain aspects of it. The main resources I keep coming back to are: 1. https://css-tricks.com/snippets/css/complete-guide-grid/ 2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 3. Googling 'css ' because…
When it comes to grid I just tend to use CSS grid generators (if you search them few will popup) and they produce great CSS grids without fail. I stopped using flexbox, because for most of the things proper set grid is enough. 3rd point is sufficient for all other css needs.
I tried to learn css back then but after few attempts I will more or less forget things as I use most of them once or twice in the project.
Re: Ask HN: How to bypass learning CSS?
#49CSS doesn't have to be annoying or boring. Understand the Box Model https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_... I find that a lot of front end developers don't really understand the box model and everything they do is just learned patterns. Once you understand how things are laid out then it becomes so much more fun and easy. Now the hard part is the actual design but I wouldn't say that's your jo…
Just reading the first section, I'm already annoyed and frustrated. It does the same thing as every CSS explanation I've ever read of explaining what but not why. Things that confuse me immediately:
* The article starts by saying there are two types of boxes. OK. Boxes have an inner and an outer display type. Already confused. Is this in addition to the two previously mentioned types? Does a box have the following: (type, inner display type, outer display type)? "First, we will explain what we mean by block box and inline box". Err what, you haven't mentioned those yet. Are they a type, an inner display type, an outer display type, or all of the above? "If a box has an outer display type of block, it will behave in the following ways". So block/inline are types of inner/outer display types? What is going on?
* Why does there need to be two distinct types of element, which seem to be randomly applied to different elements (divs are block, spans are inline)?
* Why are they called "block" and "inline" when those words don't seem to relate to their behaviour at all?
* Why does inline silently ignore width and height?
* What is an "inline direction"
* What does breaking onto a newline mean, and why do I care? Why not show a diagram?
Then my ADHD brain loses interest and concedes I will never understand.
Re: Ask HN: How to bypass learning CSS?
#50You don't know half of it. When done you will always find a user able to break everything with a different browser or version, settings, an extension, an outdated machine or odd screen size etc etc. IOW: Just make it in html and have someone tweak it where required. Focus on functionality. What does the user need? I mean really need.