I've been working as a full stack developer for 16 years, and I find Kevin a great resource to update my oftentimes outdated css skills. I mean, when I started working, layouts using tables were still a thing, so I've got at least a decade's worth of absolutely useless knowledge which I need to be reminded not to use😛
Just recently gave the same advice to a junior dev to not declare things unless they're absolutely needed. I actually give this advice to entry and junior devs a lot. Hard to believe that this isn't a topic that's taught regularly in bootcamps or on-the-job learning
As an aspiring junior web developer, I just wanted to thank you for giving advice to my fellow juniors out there. This is why I already like this career - more experienced colleagues are willing to mentor and support 🤝
I think many people are just self taught, like me. When i started, flexbox didn't even exist and css was the newest thing to do the layout. But even today i still see websites where the layout is done with tables.
In the last example I would've use .card > img { margin: -2rem 2rem 0 -2rem }. And even with your version I would've set margin-bottom: -2rem on img instead on margin-top: -1rem on h2.
Another common mistake is using background shorthand to only declare a background color, forcing the browser to fill in the other 9 values. It impacts performance, and can cause bugs that are really hard to find. Use background-color for this. Otherwise, great video 😀
I can’t imagine this to be true and even if it were, your page would have to be insanely complex for it to make any difference. Do you have a source for this claim?!
Couldn't agree more ;). In my 15+ war on frontend, other people always asks me how can I love CSS, and how I know how to fix those stupied scrollbars, unnecessary margins/paddings, wrong width/height. In 90% of the time I'm dealing with styilng bugs, the solution is to remove most of the CSS :P Most important rule in styling is: the fewer CSS the better Happy styling ;)
I've just finished blundering my way through my first web app and I have never even thought of using class names as a sort of tag for properties! I will definitely be doing that from now on!
I have to admit I was declaring width:100% as well as redeclaring of display:flex. The issue with (non)declare display:flex, is.... sometimes may child element of the element with display:flex breaks styling and another child element (grandson) behaves as not expected. Then I have to redeclare and everything get back into normal.
Display flex declaration only creates flex container for the parent element. Child elements are not automatically made flex, why? Of course grandsons are not flex.
hahaha, and my backend friends always say frontend is easy peasy, that is just like to handle a json or yaml file, that there's no complexity at all, but then they start asking for help when they need to center a div. I do both backend and frontend, and damn, frontend is hard, really hard. Top notch content, thanks.
I’m a beginner in the programming world. Being a creative person I was most excited about CSS because I thought it was going to be a breeze coming to grips with it. As of now I hate it 😅 I’m really really trying to flip the script so I can enjoy my time writing CSS
17:48 One thing I'd do instead to keep it contained in the image definition (and perhaps have done in projects, for such use of transform: translate() ) is to add the negative margins to the image itself, being its margin-block-end (/margin-bottom). So I'd never need to hunt for elements next to that kind of image or, worse, have the design broken for an unforseen following element added in a later change. And, as those numbers are the same (the margin only exists only to fill the exact gap left by the translate), I'd possibily even add the translate value to a variable (/custom property) and use that in translate and margin, so that I'd never mistakenly skip one of those in case of a change. Other than that detail for margin placement, great tips, as always! =)
Beginner(me) reason for doing it: it works. After watching this video, reason for using it: there is a good reason and good purpose for using it. What an awesome video! Thanks Kevin!!
that card flex basis is answering my trust issue / over-thinking "why my cards slightly un even?" thank u coz its tiny tiny bit un even, the fact its a technical issue not "me" problem
I was doing exactly that, using flex column when I didn’t need it. Broke that habit only a few months ago! But you’re right it’s bc flex was the first thing I learned and felt comfortable with.
Excellent advice. I learned css a long time ago and got really good at making pixel perfect sites. I was using floats and that’s how I think, so thank you for these tips, they totally make sense. Time to really learn flexbox and grid. Also, I would never use the important class. My thoughts are if you have to use !important, then something is wrong with your css
Excellent tutorial! I had that problem with flexbox just recently. Ended up deleting all mention of flexbox, and then things looked fine. Makes me wonder when I should use flexbox? Using CSS, HTML since the 1990s, so I for me learning something new involves just as much unlearning, and sometimes just using the old ways turns out fine. So don't do too much unlearning!
This is so useful to send to team members who are not good with CSS. It's interesting that all of them are layout mistakes. BTW , I see you have your VS Code zoomed in for better readability. Add these to you VS Code settings JSON to free the unused area on the left side: "editor.glyphMargin": false, "editor.lineNumbers": false,
I love this kind of video, it not only tech you useful things, but also tell you how to think difference, think right! thank you very much, keep going😊
Using _float_ and _position: absolute_ in layout is probably the most common beginner mistake I've noticed on Stack Overflow. That, and not using em/rem as a base for spacing (which is a knowledge I brought from designing books). 0.25rem, 0.5rem, 1rem, 2rem and 3-4rem is all that you need on a homepage for spacing, unless in really specific situations.
That reminds me of what my dev trainer said in the mid 2000s: "I dcon't care how you do it, as long as you have a plausible explanation why you did it that way."
Part of the problem is teachers teaching beginners bad practices. I am taking web development, and my teacher taught us float layouts. Many people were struggling with them, because it was float based layouts. I already knew css, and I knew that float based layouts were terrible, so I tried my best to not use it. My teacher also tells us that we need to put a width and a height on divs and sections, which is obviously not true. He also recently taught us position absolute, and he told us how to center stuff with it, and I'm just here thinking, there's much better ways to center things. Heck, whenever we replicate a website for an assignment, I ignore everything he taught us, and just use flex, grid, and a ton of techniques that are a bit more advanced. I have helped my neighbor many times with things, and I've looked at his css, and it's just full with pretty much useless stuff. Oh, and by the way, we had to recreate the navbar from the cafe rio website, and I think I did so much better than cafe rio. Cafe rio put lots of duplicate elements everywhere for different screen sizes. I did so much better because I made all the elements, then just moved them around with grid in order to create the same effect. (Recreating the under armour website was a pain, because it changes ever day)
there is also a setting that applies the saved changes automatically through live server without having to click on any button. just by saving the changes
Though I'm dealing with CSS for more than 15 years I found myself guilty of all charges. It's been a pleasure being awaken by you overthinking my widely narrow minded workflows. It hurts listening to your advices, but that's what sometimes makes me better. Thanks a lot for your work. It just fantastic stuff. 👋👋👍👍 Probably the most important advices that I heard from you so far.
I am an egregious offender of all of these. Thank you so much for this video. For me, it is a matter of preemptively/defensively writing CSS to lower my mental overhead (in the moment) but it quickly accumulates into painful maintenance/code debt in the long term. Advice noted!
Question: I usually don't add many classes in my html. In this example I would have added the "cards" class to the parent but not the "card" to the children, and I would have used ".cards > div" selector. For what I see in Kevin's videos that doesn't seem to be a good practice, but I'm not sure why. Anyone have opinions about it?
The issue with such selectors is that they are heavily reliant on the actual HTML structure. If you need to add something later on, stuff might break just because someone decided to add an extra div or move the current div into a different one which might have a class that overwrites stuff. It is therefore better to give classes and select them. .card-section .card {...} That will say that all cards in the card section should look a certain way. This implies the cards can be used elsewhere though due to the relationship. If it isn't, then just have a standalone .card selector and be happy. You can also look up BEM, it's a naming convention. Classes tend to become a bit bloated though, so I prefer having modifier classes in the cases where I don't have any major changes, such as the .bg-accent that was showcased in the video. Other times things do deserve their own names, usually a matter of code clarity more than anything though. My colleagues need to glance at the HTML and get a rough idea of what's going on and when they look up the classes they should be able to find relevant styles nearby.
When I used such compound selectors, it turned out to be a huge issue, as it was so hard to fight CSS specificity. Then I googled about specificity, about how to name CSS classes - and found a great advice: "Always use the class name directly on the HTML element you want to style, even if seems to cost an extra effort." I followed this advice in my next projects, and CSS specificity does not cause any issue anymore.
I used to do this stuff a LOT when I started. Doing too many rules which makes maintenance impossible. I used to throw things in there until I found the thing that worked. Now-a-days I go back and comment them out and if it still works I delete them. It's really important to do this at the time when you're faffing about because in the future say a year down the line the rules may be effecting something on a different page and I'm not sure which page, where or why. If I come back in a year I will comment it just in case something breaks.
Summary: 1. Declaring things you don't even need (e.g declaring width: 100% in most block elements or declaring height) 2. Over-reliance on flexbox (e.g declaring flex in the body or * element) 3. Over-reliance on hardcoded numbers. (Basically needing a value for several situations or cases) 4. Unnecessary class naming (learn to create reusable class names) 5. Relying on band-aid solutions that cause more problems (e.g using position absolute when it is not necessary)
Great vid. bandaid solutions are a problem in every language. I used to support software written in VB (ew!) and it was a shocker. I think also using px for widths and for responsivness as it messes up on zoomed browsers. % widths at the browser window layer is dangerous to use as Safari will return the width of the screen, not the window. Re: the multi-flex layout, I use flex-max and flex-min for each sub-element as a lot of the times I use these there are client-defined amounts and allow it to adjust itself, should all be defined in minimum number of classes. in the transform example, I would put the adjustment to margin on the image itself, that way it's self-contained with the shift of the image.
I’m still learning CSS and sometimes I get stuck and no matter what I try, I can’t make it work without something kludgey like margin-left:-12vw; By the time I finally get it working, I have all these declarations that didn’t work so I’ve gotten in the habit of going through all the CSS for that particular section line by line and temporarily commenting out each line to see if anything changes. If not, once I’m done going through all the lines and testing to make sure nothing broke, I delete all those commented lines.
This was posted a year ago, but in regars to the width: 100%; you'd only have to do this is you used a css reset defaulting everything to 0 right? Otherwise there is no need for it? As a beginner though I'd assume that most people use a css reset for reactive purposes to make sure they can set all values to whatever they need correct? Is that also a bad practice? Would that just be creating bloat code as you then have to redefine all values after a reset?
Great video! But instead of applying transform: translate(-2rem, -2rem) to the image and giving negative margin-top to the h2, couldn't you just give negative margin-top and margin-left to the image? Edit: You mentioned this a few seconds later in the video, but I'm curious what the negative side-effect would be?
I'm wondering why you would use rem units for a border radius rather than px. Would you really want your border radius to change if the user has a default font size different than 16px? Seems like border-radius would be one of the last places that using px units would still be best practice. Would love to know if I am missing something and rem is the better choice for a border radius.
Lol constantly displaying flex was something that I had to get out of very early. Many people on FrontEnd Mentor would tell me over and over that I was using it too frequently, and eventually, I broke the habit :).
Negative margins are actually pretty awesome. For instance, you could get the image to extend out over that corner with negative margins on the image, and not need to rely on other elements accommodating it. I think this would have far fewer "gotchas" than the other options.
In this scenario, I'd recommend using display grid and the grid-template-columns property. Check out Kevin's display grid tutorials for more info, if needed.
I recommend using inline css for variations that you know will only be used once... It's much faster and better in terms of performance, compared to having it in a class in the css, specially on pages that you won't navigate to frequently. I'm surprised you haven't mentioned it at all.
Taking care of CSS on an application/website is something like 5% to 10% of all the work. I can't name one person who is doing just CSS on their job. We all do from project management to writing code, to managing and optimizing the database. I don't know if such jobs exists, but if they do they must be damn relaxing.
I have always faced multiple issues while working with Images. I have to work with images with different ratios, high quality and low quality as well, and some images are so absurd that if I assign a particular CSS to them then it won't apply to other images. Please help me
I must admit that I'm still a beginner in programming. But I can say that in lots of cases I use flex with column direction just because of how simple it is to center or distribute the content both vertically and horizontally inside of its' container.
Totally agree on all of these except the one for the layout (I'm from the float era). Some times you want (or the client wants) when columns drop on multiple rows to keep the same column size. Sometimes they don't :) I would say it would be based on the situation and the design requirements. :beers:
Odd suggestion, but perhaps you could do a video about shortcuts and shorthand in VS code. Or, more broadly, the various things you do to speed up your coding process. There are a few neat things I know how to do, like how you can type .[class name] + enter to quickly create a div in an html document, but sometimes I see folks laying out code with all sorts of tricks and I feel like I've hardly scraped the surface.
I do have a few that look at Emmet for HTML and CSS that are more than just using classes :) ua-cam.com/video/vncch9-1kPE/v-deo.html and ua-cam.com/video/EhRPdUv1ZrA/v-deo.html I have this one that looks at shortcuts as well - ua-cam.com/video/9M58urr1CVQ/v-deo.html
i only use display: flex, flex-direction: column on the body and flex: 1 on content container if i need for footer to stay at the bottom of the page, but im sure there are more easier and efficient ways to approach it
there’s an npm package for live server if someone have no access to vscode / extension just type this in cmd/terminal npm install -g live-server make sure you have nodejs installed.
I use display flex for a lot of stuff, but I actually need it because I center things a lot. I imagine you're not referring to that kind of example as it's actually being used.
My way of writing CSS is super slow, doesn't matter to me as I am not a pro. However, I only use stuff to achieve a visual change. Why would to put a property in advance? It does not change anything visually. Or is it how the pros do things in order to save time and have made a habit out of it?
I can really tell I'm getting old when somebody says float layouts used to be how we did layouts :D. I still remember my early sites that used tables for layouts. Then floats and clears came. Now I'm getting back to vanilla css and am just so surprised what we can do now :)
I've just recently started learning html/ css and have already caught myself using properties that do nothing. So, I'm trying my best not to do it. However, when an element refuses to go where I want to, then I usually just start throwing properties at it, haha. I have a lot to learn. There is a project I'm working on that is stumping me. The navbar will not go all the way to the top/ left of the browser. It is positioned perfectly on the left, but it thinks it is at the top, when it is actually at the bottom of the main content of the page. And it looks like that without any css properties applied, or not applied. The navbar is below the section element in the code. Functionally, it works perfect. It just looks like garbage. Anyone have any suggestions on where to start? I would greatly appreciate any help.
One thing I always take out of code with bootstrap is: ... I think, so you just want to have a div. This is quite literally the behavior of just a div.
Feels good to know that I did all these mistakes 2-3 years ago but no more, I do other mistakes now :)
I've only been learning web development for a month and Kevin Powell is my go-to resource for learning CSS. His content is pure gold. Thank youuuu :))
Totally agree. Amazing content! Thanks Kevin
Pretty crap stuff
@@MrSkinkardecan you point me to a better resource? Maybe something you have produced?
SAME!!!
I've been working as a full stack developer for 16 years, and I find Kevin a great resource to update my oftentimes outdated css skills. I mean, when I started working, layouts using tables were still a thing, so I've got at least a decade's worth of absolutely useless knowledge which I need to be reminded not to use😛
There is so much empathy in the way you address beginners' mistakes, thank you!
That's web dev for ya. We understand now that we don't make these mistakes we have graduated to make other mistakes =)
Love Kev
Ive been working with css for about 10 years and every time i watch one of your videos i learn something new
Just recently gave the same advice to a junior dev to not declare things unless they're absolutely needed. I actually give this advice to entry and junior devs a lot. Hard to believe that this isn't a topic that's taught regularly in bootcamps or on-the-job learning
As an aspiring junior web developer, I just wanted to thank you for giving advice to my fellow juniors out there. This is why I already like this career - more experienced colleagues are willing to mentor and support 🤝
Comes from people trying to emulate bootstrap and writing a lot of initializers
I think many people are just self taught, like me. When i started, flexbox didn't even exist and css was the newest thing to do the layout. But even today i still see websites where the layout is done with tables.
Excellent video, Kevin. I have learned 99% of the CSS I know following your courses and videos. Cheers.
In the last example I would've use .card > img { margin: -2rem 2rem 0 -2rem }.
And even with your version I would've set margin-bottom: -2rem on img instead on margin-top: -1rem on h2.
Another common mistake is using background shorthand to only declare a background color, forcing the browser to fill in the other 9 values. It impacts performance, and can cause bugs that are really hard to find. Use background-color for this. Otherwise, great video 😀
what other 9 values? can you elaborate more? I tried googling this and found nothing...
@@ahmadmuraish1144 There are many values in that property like size, image, position, repeat, origin, clip and attachment of the background.
@@career963ah okie, got it. Thanks for the reply.
I can’t imagine this to be true and even if it were, your page would have to be insanely complex for it to make any difference. Do you have a source for this claim?!
Please elaborate more on that?
VS Code extension Live Server - that's what I needed here more than anything, thanks for mentioning that!
Couldn't agree more ;). In my 15+ war on frontend, other people always asks me how can I love CSS, and how I know how to fix those stupied scrollbars, unnecessary margins/paddings, wrong width/height. In 90% of the time I'm dealing with styilng bugs, the solution is to remove most of the CSS :P
Most important rule in styling is: the fewer CSS the better
Happy styling ;)
I've just finished blundering my way through my first web app and I have never even thought of using class names as a sort of tag for properties! I will definitely be doing that from now on!
@09:48 instead of flex-basis we can use flex-grow: 1 in card class. That way it will adjust width according to available items and space.
Yes that's what he did when he did flex: 1; which is a shorthand for flex-grow: 1; among a couple of others
I have to admit I was declaring width:100% as well as redeclaring of display:flex. The issue with (non)declare display:flex, is.... sometimes may child element of the element with display:flex breaks styling and another child element (grandson) behaves as not expected. Then I have to redeclare and everything get back into normal.
Display flex declaration only creates flex container for the parent element.
Child elements are not automatically made flex, why? Of course grandsons are not flex.
hahaha, and my backend friends always say frontend is easy peasy, that is just like to handle a json or yaml file, that there's no complexity at all, but then they start asking for help when they need to center a div. I do both backend and frontend, and damn, frontend is hard, really hard. Top notch content, thanks.
I’m a beginner in the programming world. Being a creative person I was most excited about CSS because I thought it was going to be a breeze coming to grips with it. As of now I hate it 😅 I’m really really trying to flip the script so I can enjoy my time writing CSS
Rare post-2022 Bandstand W
@@rewaj56 what does it even mean that you wrote? probably nil or null or undefined?
Kevin, your videos are great. It is really joy to learn CSS with them.
17:48 One thing I'd do instead to keep it contained in the image definition (and perhaps have done in projects, for such use of transform: translate() ) is to add the negative margins to the image itself, being its margin-block-end (/margin-bottom). So I'd never need to hunt for elements next to that kind of image or, worse, have the design broken for an unforseen following element added in a later change.
And, as those numbers are the same (the margin only exists only to fill the exact gap left by the translate), I'd possibily even add the translate value to a variable (/custom property) and use that in translate and margin, so that I'd never mistakenly skip one of those in case of a change.
Other than that detail for margin placement, great tips, as always! =)
I used to hate CSS, it never did anything that seemed logical to me. But once it clicked on how elements behave, I actually enjoy the hell out of it.
Cool progression, I’m still at the hating stage and cussing at css xD
I had that click moment after watching enough kevin powell videos. I used to hate frontend work because of CSS, but one day I suddenly just "got" it
Beginner(me) reason for doing it: it works. After watching this video, reason for using it: there is a good reason and good purpose for using it. What an awesome video! Thanks Kevin!!
Love your content. I am starting to like css more and more now.
👆👆👆
CSS is ❤
that card flex basis is answering my trust issue / over-thinking "why my cards slightly un even?" thank u coz its tiny tiny bit un even, the fact its a technical issue not "me" problem
My biggest mistake was to stack things using Position instead of grid or flexbox and using tons of media queries!😶😶
Best video you've produced in a while. Great timing too, cuz I'm going through this problem with my front-end course now.
Thanks!
Thank you!
Felt called out with all these common mistakes 😩 Thank you Kevin!
I was doing exactly that, using flex column when I didn’t need it. Broke that habit only a few months ago! But you’re right it’s bc flex was the first thing I learned and felt comfortable with.
Excellent advice. I learned css a long time ago and got really good at making pixel perfect sites. I was using floats and that’s how I think, so thank you for these tips, they totally make sense. Time to really learn flexbox and grid. Also, I would never use the important class. My thoughts are if you have to use !important, then something is wrong with your css
Excellent tutorial! I had that problem with flexbox just recently. Ended up deleting all mention of flexbox, and then things looked fine. Makes me wonder when I should use flexbox? Using CSS, HTML since the 1990s, so I for me learning something new involves just as much unlearning, and sometimes just using the old ways turns out fine. So don't do too much unlearning!
I think this has to be the number one channel when it comes to CSS.
This is so useful to send to team members who are not good with CSS. It's interesting that all of them are layout mistakes.
BTW , I see you have your VS Code zoomed in for better readability. Add these to you VS Code settings JSON to free the unused area on the left side:
"editor.glyphMargin": false,
"editor.lineNumbers": false,
line numbers may be helpful in some cases but idk exactly
@@goodshiro10 yeah I personally keep them. Only hide the glyph area. Some people have a keyboard shortcut to hide/unhide line numbers
I love this kind of video, it not only tech you useful things, but also tell you how to think difference, think right! thank you very much, keep going😊
Using _float_ and _position: absolute_ in layout is probably the most common beginner mistake I've noticed on Stack Overflow.
That, and not using em/rem as a base for spacing (which is a knowledge I brought from designing books). 0.25rem, 0.5rem, 1rem, 2rem and 3-4rem is all that you need on a homepage for spacing, unless in really specific situations.
That reminds me of what my dev trainer said in the mid 2000s: "I dcon't care how you do it, as long as you have a plausible explanation why you did it that way."
I will admit it, I tend to put flex on everything. Ok, not everything. I put it on whenever I need to, which tends to be quite a lot of stuff.
Finally an oasis. A channel dedicated to CSS and the magic that it is.
Part of the problem is teachers teaching beginners bad practices. I am taking web development, and my teacher taught us float layouts. Many people were struggling with them, because it was float based layouts. I already knew css, and I knew that float based layouts were terrible, so I tried my best to not use it. My teacher also tells us that we need to put a width and a height on divs and sections, which is obviously not true. He also recently taught us position absolute, and he told us how to center stuff with it, and I'm just here thinking, there's much better ways to center things. Heck, whenever we replicate a website for an assignment, I ignore everything he taught us, and just use flex, grid, and a ton of techniques that are a bit more advanced. I have helped my neighbor many times with things, and I've looked at his css, and it's just full with pretty much useless stuff.
Oh, and by the way, we had to recreate the navbar from the cafe rio website, and I think I did so much better than cafe rio. Cafe rio put lots of duplicate elements everywhere for different screen sizes. I did so much better because I made all the elements, then just moved them around with grid in order to create the same effect.
(Recreating the under armour website was a pain, because it changes ever day)
Thank you Kevin! The best source of CSS as always!
there is also a setting that applies the saved changes automatically through live server without having to click on any button. just by saving the changes
I’m subbing because of your lighting.
I've learned many tricks and "best approachs" with this video about 'flex' usage. Many thanks and Good Jobs.
your content is pure gold
This is the kind of videos that help the most. You should make a section "Common mistakes".
Though I'm dealing with CSS for more than 15 years I found myself guilty of all charges. It's been a pleasure being awaken by you overthinking my widely narrow minded workflows. It hurts listening to your advices, but that's what sometimes makes me better. Thanks a lot for your work. It just fantastic stuff. 👋👋👍👍 Probably the most important advices that I heard from you so far.
I cannot believe how powerful CSS is! Frameworks like Tauri are the future!!!
Bro, flex basis 100% is insane. Thank you.
Your height trick helped me in a recent project. Thanks
My big mistake was not looking at the larger picture, great advices again
I am an egregious offender of all of these. Thank you so much for this video. For me, it is a matter of preemptively/defensively writing CSS to lower my mental overhead (in the moment) but it quickly accumulates into painful maintenance/code debt in the long term. Advice noted!
Fall madly, deeply in love with CSS. 😎
It always triggers me so much when I open source of any website and see flex-box everywhere... 😅
Question: I usually don't add many classes in my html. In this example I would have added the "cards" class to the parent but not the "card" to the children, and I would have used ".cards > div" selector. For what I see in Kevin's videos that doesn't seem to be a good practice, but I'm not sure why. Anyone have opinions about it?
The issue with such selectors is that they are heavily reliant on the actual HTML structure. If you need to add something later on, stuff might break just because someone decided to add an extra div or move the current div into a different one which might have a class that overwrites stuff.
It is therefore better to give classes and select them.
.card-section .card {...}
That will say that all cards in the card section should look a certain way. This implies the cards can be used elsewhere though due to the relationship. If it isn't, then just have a standalone .card selector and be happy.
You can also look up BEM, it's a naming convention. Classes tend to become a bit bloated though, so I prefer having modifier classes in the cases where I don't have any major changes, such as the .bg-accent that was showcased in the video. Other times things do deserve their own names, usually a matter of code clarity more than anything though. My colleagues need to glance at the HTML and get a rough idea of what's going on and when they look up the classes they should be able to find relevant styles nearby.
When I used such compound selectors, it turned out to be a huge issue, as it was so hard to fight CSS specificity. Then I googled about specificity, about how to name CSS classes - and found a great advice: "Always use the class name directly on the HTML element you want to style, even if seems to cost an extra effort." I followed this advice in my next projects, and CSS specificity does not cause any issue anymore.
I used to do this stuff a LOT when I started. Doing too many rules which makes maintenance impossible. I used to throw things in there until I found the thing that worked. Now-a-days I go back and comment them out and if it still works I delete them. It's really important to do this at the time when you're faffing about because in the future say a year down the line the rules may be effecting something on a different page and I'm not sure which page, where or why. If I come back in a year I will comment it just in case something breaks.
Summary:
1. Declaring things you don't even need (e.g declaring width: 100% in most block elements or declaring height)
2. Over-reliance on flexbox (e.g declaring flex in the body or * element)
3. Over-reliance on hardcoded numbers. (Basically needing a value for several situations or cases)
4. Unnecessary class naming (learn to create reusable class names)
5. Relying on band-aid solutions that cause more problems (e.g using position absolute when it is not necessary)
wow flex-basis or fle:1 were great, thanks❤
I've always hated CSS, but you as CSS Evangelist have changed my mind and perspective, so now I love CSS more than JS. Thank you, Kevin
The picture of the man shaving is just straight 👌😂
Great vid.
bandaid solutions are a problem in every language. I used to support software written in VB (ew!) and it was a shocker.
I think also using px for widths and for responsivness as it messes up on zoomed browsers.
% widths at the browser window layer is dangerous to use as Safari will return the width of the screen, not the window.
Re: the multi-flex layout, I use flex-max and flex-min for each sub-element as a lot of the times I use these there are client-defined amounts and allow it to adjust itself, should all be defined in minimum number of classes.
in the transform example, I would put the adjustment to margin on the image itself, that way it's self-contained with the shift of the image.
I’m still learning CSS and sometimes I get stuck and no matter what I try, I can’t make it work without something kludgey like margin-left:-12vw; By the time I finally get it working, I have all these declarations that didn’t work so I’ve gotten in the habit of going through all the CSS for that particular section line by line and temporarily commenting out each line to see if anything changes. If not, once I’m done going through all the lines and testing to make sure nothing broke, I delete all those commented lines.
Great content as usual ... I think you can press "Alt + Z" to word wrap so you don't have to scroll horizontally
line wrapping triggers me for some reason, lol
@@KevinPowell 🤣🤣🤣 if you insist
This was posted a year ago, but in regars to the width: 100%; you'd only have to do this is you used a css reset defaulting everything to 0 right? Otherwise there is no need for it? As a beginner though I'd assume that most people use a css reset for reactive purposes to make sure they can set all values to whatever they need correct?
Is that also a bad practice? Would that just be creating bloat code as you then have to redefine all values after a reset?
Thanks for the video brother!
Thank you very much. All of this is useful for me.
Amazing simple and clear explanation 🎉
Great video! But instead of applying transform: translate(-2rem, -2rem) to the image and giving negative margin-top to the h2, couldn't you just give negative margin-top and margin-left to the image?
Edit: You mentioned this a few seconds later in the video, but I'm curious what the negative side-effect would be?
I'm wondering why you would use rem units for a border radius rather than px. Would you really want your border radius to change if the user has a default font size different than 16px? Seems like border-radius would be one of the last places that using px units would still be best practice. Would love to know if I am missing something and rem is the better choice for a border radius.
Lol constantly displaying flex was something that I had to get out of very early. Many people on FrontEnd Mentor would tell me over and over that I was using it too frequently, and eventually, I broke the habit :).
Negative margins are actually pretty awesome. For instance, you could get the image to extend out over that corner with negative margins on the image, and not need to rely on other elements accommodating it. I think this would have far fewer "gotchas" than the other options.
I won't lie, I use negative margins quite often. They've come in clutch many times.
It's a great tutorial. Thank you!
hello! what you do if you need 2 rows and 10 elements? if you need to wrap flex row
In this scenario, I'd recommend using display grid and the grid-template-columns property.
Check out Kevin's display grid tutorials for more info, if needed.
Tanks for your video. 😊 Usefull tips 👍
I recommend using inline css for variations that you know will only be used once...
It's much faster and better in terms of performance, compared to having it in a class in the css, specially on pages that you won't navigate to frequently.
I'm surprised you haven't mentioned it at all.
Taking care of CSS on an application/website is something like 5% to 10% of all the work. I can't name one person who is doing just CSS on their job. We all do from project management to writing code, to managing and optimizing the database.
I don't know if such jobs exists, but if they do they must be damn relaxing.
I usually use display flex on the body so that i can center the content. is there a better way of doing it?
Loving your work, brother! Thanks a million!!
Your tips just solved my problems. Thanl youuuu 🤟🤟🤟💌💌💌
Hi Kevin,
Can we use or call WebP or avif images in structure data (image schema microdata) ?
Is acceptable under Google standards?
I have always faced multiple issues while working with Images. I have to work with images with different ratios, high quality and low quality as well, and some images are so absurd that if I assign a particular CSS to them then it won't apply to other images.
Please help me
Naming conventions are a pain in the backside which is why I'm veering towards Tailwind.
I must admit that I'm still a beginner in programming. But I can say that in lots of cases I use flex with column direction just because of how simple it is to center or distribute the content both vertically and horizontally inside of its' container.
when shifting the image with -2 top, why not just add margin-bottom -2 to it, then its settled in the same class?
Totally agree on all of these except the one for the layout (I'm from the float era). Some times you want (or the client wants) when columns drop on multiple rows to keep the same column size. Sometimes they don't :) I would say it would be based on the situation and the design requirements. :beers:
One word: css grid 😊
Odd suggestion, but perhaps you could do a video about shortcuts and shorthand in VS code. Or, more broadly, the various things you do to speed up your coding process. There are a few neat things I know how to do, like how you can type .[class name] + enter to quickly create a div in an html document, but sometimes I see folks laying out code with all sorts of tricks and I feel like I've hardly scraped the surface.
I do have a few that look at Emmet for HTML and CSS that are more than just using classes :)
ua-cam.com/video/vncch9-1kPE/v-deo.html and ua-cam.com/video/EhRPdUv1ZrA/v-deo.html
I have this one that looks at shortcuts as well - ua-cam.com/video/9M58urr1CVQ/v-deo.html
i only use display: flex, flex-direction: column on the body and flex: 1 on content container if i need for footer to stay at the bottom of the page, but im sure there are more easier and efficient ways to approach it
Css grid: display grid; grid-columns: 200px, 1fr, 200px; given that the footer and header are 200px, change that according to what you need
there’s an npm package for live server if someone have no access to vscode / extension
just type this in cmd/terminal
npm install -g live-server
make sure you have nodejs installed.
I use display flex for a lot of stuff, but I actually need it because I center things a lot. I imagine you're not referring to that kind of example as it's actually being used.
you could do display: grid; place-items: center
Thanks for your video. What keyboard do you use?
I'm curious. ^^
My way of writing CSS is super slow, doesn't matter to me as I am not a pro. However, I only use stuff to achieve a visual change. Why would to put a property in advance? It does not change anything visually. Or is it how the pros do things in order to save time and have made a habit out of it?
Start making complex layout responsive design. Don't fall into tutorial rabbit hole.
I do every mistake from this video :DDDD. Thanks for sharing it with us!
This is one of the videos where I like before watching.
@Kevin Powell please make a video what is the difference between % vs. em font-size
Dude I love you 💟
love you Kevin !
Why do you use a class .article-header instead of selections „article header“?
I can really tell I'm getting old when somebody says float layouts used to be how we did layouts :D.
I still remember my early sites that used tables for layouts. Then floats and clears came. Now I'm getting back to vanilla css and am just so surprised what we can do now :)
Most common error I've seen so far is the use of "magic numbers" for applying dimensions, which seems to be a bit related to item 3 from your video.
"over use of flex box"
**slowly does homer simpson backup into the bushes**
I've just recently started learning html/ css and have already caught myself using properties that do nothing. So, I'm trying my best not to do it. However, when an element refuses to go where I want to, then I usually just start throwing properties at it, haha. I have a lot to learn.
There is a project I'm working on that is stumping me. The navbar will not go all the way to the top/ left of the browser. It is positioned perfectly on the left, but it thinks it is at the top, when it is actually at the bottom of the main content of the page. And it looks like that without any css properties applied, or not applied. The navbar is below the section element in the code. Functionally, it works perfect. It just looks like garbage.
Anyone have any suggestions on where to start? I would greatly appreciate any help.
One thing I always take out of code with bootstrap is:
...
I think, so you just want to have a div. This is quite literally the behavior of just a div.
But some times you want to put the center, a short content inside a DİV and u have to use height property to center it
Do you think openai will take over jobs for webdevelopers and such?