Annoying parts of CSS
What's something in CSS that you have to look up every time you want to do it? That thing that just never clicks in your brain or you've never spent the time to truly understand?
Mine is flex positioning.
Align self, justify content, align items... I always get them confused with each other.
I'm currently using tailwindcss (although some folks of my company would like to use css components). It think tailwindcss is so handy, makes using CSS very "straightforward".
This Flexbox Zombies game will help you with flex box: https://mastery.games/flexboxzombies/
Courtland had the author on the IH pod.
I Google "Flexy Boxes" every other day so I can use that Flexbox designer that's been online for 10+ years.
Not being good at CSS is why I made https://www.snipcss.com
Helps me spend as little time as possible on the front-end.
Flex-box.
What I don't have in my brain I need to compensate with my hands...
Flexbox Froggy is a cool and easy way to learn flexbox - https://flexboxfroggy.com/
Thanks for sharing. Very cool.
Centering divs
For me gradient is something I need to google for hrlp
dude, everything. Centering divs, flex, justify-content vs align-items, shadows, you name it.
My latest css mystery is the fact that 100vh works perfectly on desktop but overflows on mobile. css is not for the faint of heart.
As for the mystery of the "100vh" now fortunately there are also svh (smallest viewport height) and lvh (largest viewport height), which make mobile development much more enjoyable.
More info here
I’ll test this out! Thanks for the advice!🙏
You're welcome.
Just consider that these new units are not yet well supported.
I just looked it up, .05% supported.
https://caniuse.com/viewport-unit-variants
Uhhh, even worse than expected. I didn't want to give you false hope (:
Anyway there is some trick if using "vh" is the only option. I'll leave a couple of links here that have come in handy in the past:
mix-blend-mode is one but mainly because you have to get it right depending on what blend mode you're using on what elements.
Gradients. For whatever reason, I can never keep the syntax of linear-gradient and radial-gradient in my head. I just don't use it quite enough.
https://cssgradient.io/
I can't remember the last time I've used a gradient outside of tailwindcss! If I did I'm sure i'd have this same problem too.