CSS => Too Good ✅ | Pt.2
I'm back again complaining about CSS. My last post a while ago helped me a bit but I'm still stuck with something. I'm currently creating my own App and still struggle with a few things such as units, rules and accessibility. I don't know know which units to use for what and what I have to consider with my design and technique. I'm still thinking about using Bootstrap. But with Bootstrap comes alot of trash and code breaking stuff. I've already built my own HTML structure and if I try to switch to Bootstrap now much stuff will break (probably) and you can't really customize stuff that well with Bootstrap aaaaannnddd its outdated!
Summary: My head goes boom 💥
28 Replies
So what's your question exactly?
If you give some examples, folks can try to suggest what units to use
Also https://whatunit.com/
To be honest I don't really know myself. I'm just really struggling. I'm gonna go on a break rq. My head is about to explode.
what exactly are you struggling with?
what is so outdated about Bootstrap?
for now i think i will just deactivate my CSS and only focus on the functionality first
is it the right decision?
yes
@CodeMoon07 the recommended time to be stuck before asking for help is 15-30 minutes. Maybe make it 45 cause answers here take a while sometimes... But "my head is about to explode" is hours too late
make it work, make it good, make it fast
if it isn't working, don't try to make it good because it won't be
im sorry i just got some food
im here now
My advice for people new to CSS and it's wide variety of units hasn't changed in years, so here it is:
* Are you sizing font? Use
rem. This avoids compounding issues you get with em
* Are you sizing space (margin/padding)? Use em. This allows bigger things to have more space
* Are you sizing visual flourishes (border, inset, offet, etc)? Use px. It doesn't matter what their screen size is as it's just to look nice
* Are you sizing an image? Use max-width: 100%;. This prevents them from being too big and getting pixelated
* Are you sizing text? Use ch. This gives a better mental model as it's practically a character widthwhat about widths and stuff
What about them? "Width" is too vague. What are you sizing the width for? Images? Text?
widths for cards or input fields
You need to know why you're setting a width, not just that you are setting one
Cards are textual, right? So use
ch b/c that's what I recommend for text
Input fields? Same. It's textso anything text based i should use ch
and sizing text rem
font-size should be in rem, widths for text elements should be in ch
So your h1s should be 2rem, and h4s should be 1rem. Your text input should be appropriately sized. So if you're looking for a word or two then 40ch should be plenty wideIsn't better for margin and paddings?
cause why should it be relative to 16px if it doesnt have to do anything with text
depends on what you want, but both are valid
em will grow with font size adjustments, px will not. So generally, paddings for stuff like buttons and other text-containing elements you would go with em,so paddings and margins with em if the same element is text based and for layout margins and paddings px right?
well if its from kevin i will follow that chart
kevin is the CSS king 👑
No. When starting out stick with
em for margin/padding. Bigger text needs more space than smaller text. When starting out stick to the simple rules. Brach out when you know more. Don't overcomplicate things.
Know the basic rules before you get fancy.FINALLY
I understand CSS
Are yall happy or not? 😔
are you being sarcastic?
I'm really not sure what you're trying to achieve by venting here, rather than using the space as the valuable resource it can be whenever you're stuck
like, way before your "head is going to explode"
Sorry for my behaviour. I thought it's a bit more chill in here. But yeah. The problem is solved and I will become the next CSS king (hopefully)
you're fine, but like... I don't get why you stay stuck until frustration when folks here are more than willing to help, and then just come here to vent when you're so frustrated you have to step away from your PC. You could save yourself that frustration and learn so much quicker if you just asked direct questions with code examples
but you do you 🤷
Thank you for you guys's help! 😁