The dumb CSS mistakes I always make (and how I debug them)
ฝัง
- เผยแพร่เมื่อ 7 ก.ค. 2024
- We all make dumb mistakes from time to time, so today I'm sharing some of the dumbest CSS mistakes I make on a regular basis.
🔗 Links
✅ Geoff Graham’s CSS-Tricks article that inspired this video: css-tricks.com/my-dumbest-css...
⌚ Timestamps
00:00 - Introduction
00:56 - pointer: cursor
03:18 - enabling VS Code CSS linting
04:50 - transform: transition
05:50 - color instead of background-color
07:25 - pseudo-elements content property
09:37 - display: absolute
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![[안방1열 직캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FanCam) @SBS Inkigayo 2404707](http://i.ytimg.com/vi/Tn3bGHiBWkg/mqdefault.jpg)
![[안방1열 풀캠4K] 베이비몬스터 'FOREVER' (BABYMONSTER FullCam)│@SBS Inkigayo 240707](http://i.ytimg.com/vi/_2HL-ogzzBU/mqdefault.jpg)
What are some of the dumb, recurring mistakes you make when writing CSS?
"font-color" instead of "color" :P
display: hidden
@animation
Trying to set a Z-Index on an element before giving said element a stacking context
min-width: none
max-width: auto
The CSS God is human too. That's comforting.
Oh man, what a humbling video. I make a ton of mistakes as a senior FE dev. Having a linter is great. Thanks for the upload, Kevin!
Man, your content has helped me so much over the last 4 months when I finally got my first job as a front end web dev, all those css tricks your videos reached me
I’d say it’s only fair you do some mistakes from time to time, considering the quality of what you teach us
Thank you for taking some time to get back on your mistakes and correct them, it’s really nice of you
I've only just started to learn CSS from The Odin Project and I've fallen in love with your channel! Just subbed to it
One that gets me every single time is grid-template-columns. Is it repeat(1fr, 3) or repeat(3, 1fr). I always get it backwards for some reason, and I know I'm going to mess it up, and overthink myself into it just like you xD
Keep at it! Grid was an annoying concept to master for me but it came eventually. It’s repeat(3, 1fr).
What does this even do? Does it just do 3 even columns? I can't stray away from flex because its just so intuitive!
@@jakewynn Yeah, it creates 3 even columns. I'd actually see it's more intuitive than flexbox, at least imo, but it does have a bit of a learning curve :)
For me, Emmett saves me every time - "posa" and "curp" for "position: absolute" and "cursor: pointer" are so ingrained I never have to think about them.
This video made my day. I used to beat myself up so badly for making most of these mistakes and more, but now that I realize the CSS King makes these mistakes too, I won't feel too bad about them anymore. Thanks.
hi kev, your videos are just too good, i love all the CSS stuffs...and yes, you do make us fall in love with CSS !!
Thank you Kevin for making these awesome vids. I have been looking for a channel that I enjoy learning from, and I finally found it. I think its just you down to Earth approach to your teaching. I just started the 21day challenge and got on Discord...loving the community there. I will become a Patreon as well so I can give back to you for doing all this hard work on these vids. Making TH-cam videos is not easy. Thanks again Kevin!!
I'm guilty of all these. But the pointer: cursor get's me everytime!
Also, just remember that `cursor: pointer` goes in alphabetical order - then you'll always know if it's right or not :)
... until he wants to apply `cursor: auto` 😉
@@VeitLehmann auto: cursor just looks plain wrong though...
I don’t think I’ve ever done display: absolute, but I do position: inline-block all the time
For something like your background colour problem, one thing I'll do is check the computed values in the inspector to double-check if the browser is setting the property to the value I think I set. For your case, if the background colour was being inherited from some other element up the chain, seeing it in the inspector might jog your mind into realizing the error.
very helpful video.... and yeah the Background and color one was awesome.. it has done so many time from my side...
I'm so glad I'm not the only one who makes these typos! ... and I've been working with CSS since it was first introduced.
Thanks for making this video. Now I know that I am not the only one making these mistakes most of the time 🤭For me "cursor: pointer" and "transform: transition" happen quite a lot.
One of very rare videos, that made me happy knowing 'oh thank god i am not the only one' that 'oh that's neat thing i learnt today' 😅
using overflow: hidden high up in the DOM some time early in the projects and then coming to a point where I need to make something sticky
Oh, that one did already took me hours to catch! First recognizing the problem, then finding that damn `overflow: hidden`, but above all: checking what might break when removing it.
I only did forget content: "" a few times. Now I had to forget if it is cursor: pointer, or pointer: cursor. This video definitely helps :))
I also happen to forget `content` for pseudo-elements a lot. And duplicated rules are also very common. That's why I like to have my rules sorted by Stylelint. I like a logical order there, like SMACSS, because that's a natural order for me to reason about the rules being applied. What I always mix up is `flex-direction: row` vs `column`, but luckily that's something you can see immediately if you got it wrong. And finally, specificity issues. But that might not count as a dumb CSS mistake anymore, that's hitting all of us I guess 😉
Always a great video! Shortcut keys are the way to go sometimes. I used AutoHotKey to put stuff I use regularly plus the ones already in the VS Code! Great job and thank you!
I should definitely make a hotkey for position: absolute, lol 😅
@@KevinPowell you can type poa, for position: absolute, similiarly por & pof for relative and fixed respectively
It's intellisense
Mostly I try to type only the first letter of the property I want
Like cup for cursor: pointer
And so on......
It helps everytime
I recommend it strongly
Master intellisense!
Btw, love your videos!
You come up with great CSS tips!
Learnt figma from you!
Keep up the good work!!
That transition-transforms mistake also happens to me every time! :D
nice to know I'm not the only one who makes dumb mistakes. Common one for me is getting @media (max-width:) and (min-width:) mixed up and listing it out in the wrong order in the css
align-items vs justify-content. I usually mix and match until I get what I want
Kevin you are the best!
The mistake I always do I no longer have to worry about! I would constantly type translate: transform
So happy with the new spec on this, lol.
@@KevinPowell definitely looking like a lot of cool stuff should be getting better support this year.
the color one sure happens to me a lot as well... and i also did the inverted translate: transform quite often too 😂
I too get most of these errors 😅
But im kinda happy, a pro like you too just stare at the code to figureout "what stupid mistake i did" 😆
Thank a lot for all the wisdom you share
😊✌
Re: "display: absolute", I have similar mistakes in other languages, and the way I often find out is that I remove the value, press Ctrl + Space to open Intellisense and find out "Oh the name/value I need is not here".
Dumbest I once (or twice) did, is to refresh the online website (domain) instead of my localhost and wondering why nothing changed :) .
I had never made these mistakes before. But after watching this video I may Start making these mistakes. This video is affecting my brain somehow.
display: absolute; is one I've spent some time on in my current project
I make the exact same mistakes you showed! Every one of them hahaha! I'm glad to know I'm not the only one! Thanks for the video!
beautiful :)
I had the same cursor/pointer dyslexia until I made a memory trick: "how do I want my 'cursor'? like my hand, pointing"
I have a mental block with 'cursor' too. But instead of getting it back to front, it's the actual naming convention doesn't make sense to my mind, so I constantly get 'default' and 'pointer' mixed up. To me, 'pointer' sounds like it's describing an arrow, so when I want a 'hand' icon, I often slip up as I'm thinking 'well I Don't want an arrow so it must be 'default'.
My other one is a weird keyboard muscle memory I seem to have instilled in me to always spell 'background' as 'backgurond', which is surprisingly difficult to spot in a large chunk of code.
Thanks for your content! Please make a video about safe-area-insets in css and how use them with 100vw or vh ☺️☺️☺️
I do make the ::before mistake as well!
I do the same thing with the color and display property at times. I also sometimes want to write font-color instead of color (even though it doesn't exist). It would make sense with all the other font properties that are available... size, weight, family, etc. but as we know that isn't the case haha
if it helps, the tooltip for 'absolute' says: "in combination with float and position..."
that way you can check if you wrote 'position' or 'display' :D
I can totally relate to the pointer: cursor problem; I do it all the time. Someone pls send help.
You could try
The mouse has a cursor and its cursor is a pointer.
But you might say it the other way also 😂
again, I love your choice of tshirt when calling yourself dumb. Irony at its best. Thx, Kevin ;D
Very helpfull video :) now I won't be so terribly mad at myself and consider myself as dumass for all those stupid mistakes, if they happen for best expert in this matter 😄
I left the content off of pseudo elements for so long so many times that I ended up making a mixin for it to deal with that AND the top left right bottom in one fell swoop - I worked around my dumb. Now inset is here and I've been doing css for so many years I have stopped using my mixin for new code now ... may need to go back to it yet, we'll see 😄
I never manage to get the ellipsis property right - aaaaand of course pointer: cursor is also something I mix up all the time
Whole working in React with Vite last night, I spent a good 40+ minutes troubleshooting and googling trying to figure out why my scss modules weren't working when they ALWAYS work in the same environment, only to find out that I had forgotten to add the .module to the scss filename 😶. The utter disappointment I had in myself.
lol the pointer cursor gets me every time
That cursor: pointer mistake happens to me very often
I also use color when I need a background-color... And everything get more confusing when styling SVG, I never remember to use 'fill' instead of background.
Furthermore, why not to use button { cursor: pointer } instead of .button { cursor: pointer } (global element selector instead of class), and use .button classes just for additional custom styling.
Totally valid, I'm just in the habit of using .button for my buttons, since I often end up using it on links and buttons alike. But doing it on the button element itself could be a decent thing to include in a personal CSS reset, since it's something most people end up applying to every project anyway.
I like having a special button class because in the real world my designer will someday request that I make a button look like a link (bad ofc) or something else, and I don’t want to need to override the button styles when that time comes.
@@jshstuff element selector for common styles. Additional classes for style modifications 😏 because ‘button’ and ‘a’ elements might always have a cursor pointer. And you don’t want to repeat yourself in style modifications.
@@coolemur976 yep I agree
Tip: When you wasted more than 2 minutes trying to debug something give a try to chat GPT to debug it for you, it helps so much
Hey you are the one of my favourite creator
The error of forgetting the background color in the before or after happens to me from time to time, but what always happens is when I use transition & transform I always get confused XD, because I use transform: transition 1s easy-in as an example, and I get wondering why it's wrong XD.
I always confuse box-sizing and border-box. I have to think about it and still put it the wrong way
display:hidden is mine (especially since one of my common helper classes is named "hidden" so it's often top of mind)
Mistakes are good. They teach you troubleshooting skills and you learn other things while trying to fix those mistakes.
It's alphabetical: Cursor comes before pointer ;)
Hahaha. Accurately!
Kevin, I learned somewhere that you do not have to have the last semicolon before the closing curly bracket. I’ve been doing it ever since. My logic is that it decreases the file size and, therefore, the page load speed. What do you think?
Very, very small savings, and for me, opens up adding a new property later on and forgetting to put one on the previous line... But if your comfortable working that way, it won't hurt
Great video
I identify myself with the last mistake haha that happened to me a couple of times.. really frustrating xD
We can make mistakes but is more valuable knowing how to fix them
I always mess up commas with _linear-gradient,_ _box-shadow,_ and multiple inputs in _background-image._
yup, commas are definitely another
The other day I couldn't understand why my style was wrong with Chrome and not Firefox in vertical modes. I was using @media (min-ratio: 1)
Turns out Firefox is content with a screen ratio of "1" but Chrome wants it to be "1 / 1"
Of course since then I've learned about orientation landscape/portrait media queries.
Color & background color😅 I’ve been making this mistake too
Just remember Absolute has a position or remember the b can be flipped to be the p for position. Or Apsolute...
One time I absolutely forgot to add a dot.... Before my selector wondering why no styles were showing. Time I'll never get back in life 😭
At least you write the names right. I wasted a lot of time trying to understand why things weren't working only to realize I switched letters. 🤦♂️
I love your channel Kevin, God bless you bro 🙏🛐✝️ keep up the great content. Can you do some videos with ShadowDOM components? Thank you!!
Giving properties to parents when you are trying to style a child is the most annoying mistake I always make.
Thnx
If the CSS king himself made mistakes writing CSS. Then I don't need to feel too bad about myself.
I forget to add "solid" to my borders alllllll the time. The first time I forgot, it took me 2 days to realize 🙃
oh and the "url" before the () on background images
regarding pointer:cursor it's similar to dyslexia swapping words
I have done all you listed except the cursor. The one I make every day is spelling position I leave out the first i and like you although I have done it daily I can look at it and not see it.
the cursor is the pointer finger 😃 cursor: pointer;
Hope it will help !
No such thing as a dumb CSS mistake. Everything is a learning opportunity.
Mine is always border-box: box-sizing.
I always spell centre properly before realising it needs to be set to a regional dialect.
I always forget about the content property 🙂
The cursor points, but the pointer curses.
Yes, even the CSS king on TH-cam himself makes mistakes - so I feel less stressful writing CSS lol
💙
Its natural to make mistakes, we are only human!
Display: absolute is the story of my life.
I never make stupid mistakes, only very clever ones.
02:00 crosshair:cursor; ???
"We all make dumb mistakes from time to time" - some of us make them all the time 🤣 I'm one of those who will make an error of some kind on almost every line. Mis-typing variable names, getting things the wrong way round, missing a parameter...the list just goes on and on.
border: 1px soild red
Every. Single. Time.
I have wonky fingers
Display: absolute 🤣😄
There's this guy. He is very angry and *cursing*, and pointing at the idiot that wrote bOdYDisPLayaBSoluTe.
The curser is pointing.
cursor: pointer
writting a comma instead of a semicolon
`display: absolute`
Every. Single. Time.
Glad I'm not alone! 😁
"font-color" while styling color of font😶🌫
Whenever I'm teaching to beginners it's always fun explaining that we prefix everything with "font-" or "text-"... except color, that's just "color", lol.
@@KevinPowell Maybe because it also applies to borders? 😬
I have yet to get the { cursor: pointer; } order correct on the first try (even while typing this comment).
On the very rare occasion that I have to style an ID, I've spent untold amounts of time trying to figure out why my `.box` css isn't working for my `` element. *facepalm*
I've been there too :D
Hey there my friend and friends, my name is Kevin...
A lot of people (including auto-captions a lot of the time) hear friend and friends, but I'm saying front-end friends 😊
Sir How are you?😊
I'm great, thanks! :D
I keep spelling widht wrong 😂
Comments show someone commented a day a go.???
My Patrons get access to videos ~48 hours before they go live :)
cursor: pointer; remind yourself it's in alphabetical order