I think some people are missing the point I'm making in this video. I'm not saying never to use the * selector, I'm saying make sure you know what you're doing when you do use it. If you want to set the box-sizing to border-box, or nuke all your margins, go for it. Lately, I've seen people using it for `color`, `font-family` and other things where it just causes all sorts of headaches. That's what I'm advocating against. Sorry if I wasn't more clear.
Yeah, the first thing that when through my mind when you started this is "Oh, there goes inheritance." To me, this feels like a classic hammer/nail situation. I'm far from a CSS expert, but really, this is one of those things you need to work with, not against.
@@erics2133 I think the main reason this started was the use of libraries and the desire to overwrite their default styling: you want the JS functionality but not the CSS that goes with it. And there the main problem is specificity. By throwing in the “*” rule set after everyone’s CSS, your styles have no competition. But yes, it is a horrible approach but so is the sluggish world of solving every little thing with libraries. The root problem that started this.
@@micaelalgarrao6043 lets say we have a box that is 50px by 50px. If I add a 1px border, the box will be 52px by 52 px now. Border box makes it that the box will always be 50px by 50px.
@@micaelalgarrao6043 the default box-sizing setting makes it so the height and width you set on an element applies to its content box. so if you add border and padding, the element is now actually bigger than what you specified. doing * {box-sizing: border-box} makes it so both padding and border are included in the width and your elements are the size you set them to.
One of the reasonable use cases for the star selector is to set an outline on all elements to debug potential layout issues. Something like this: * { outline: 1px solid red; } It helps you visualize element borders at a glance, which is helpful if one of the elements is causing problems but you're unsure which one or where to look.
100%! Whenever I talk about that, people say "just use your dev tools bro". Clearly they've never had the fun of finding nested elemetns that are causing overflows and other quirky things 😅
That is a neat trick, and the semi-transparent background-color is actually also useful for this. If you have the Edge-browser there is a nice devtool called 3D something, that gives you a 3D view of all the nested elements, that is even better for this!
I started learning HTML and CSS a few weeks ago. My god, I'm so lucky I found your channel. It's a friggin' treasure trove of knowledge and great advice!
@@CSSWeekly That's a good question. Oddly enough, the answer is not a feature of the technology per se. tl;dr Coming to terms with the fact that CSS has tons of quirks that you just have to rote-learn. What I originally typed: So my wife who's been a Java coder for the last five years and started out with front end, but quickly switched over, recommended that I pick a random, not-too-complex free website template online and recreate it from scratch without looking at the original code. First, in block, then in flex. CSS grid apparently wasn't a thing five years ago? Anyway. As I learned more and more about how flex works and what certain best CSS practices are and progressed through the template, I had to continuously rewrite portions of what I'd written the previous day. And I was perfectly happy to rewrite stuff that was dictated by pure new best practices knowledge, like culling divs and unnecessary ids and classes, switching h2-h6s around, redoing pixels into rems and percentiles. But finding out about more and more unintuitive and unpredictable default properties of elements really put a damper on my motivation. Not to learn CSS in general, but just to optimize this test template. I mean, I was going completely by look, naturally using crutch solutions along the way and having to deal with overflows all the time. But when I finished the template and started learning that there were built-in paddings and margins to elements like headings? How style inheritance worked? The way :nth-child() handles a series of siblings with a little cuckoo bird egg in their midst? Etc., etc. Finding the motivation to go back in and redo tons of values, and get rid of the crutches, and the overflow workarounds (or ones I'd left in) that were there because I previously had no way of knowing that CSS had all these unintuitive defaults was probably the hardest thing in the learning process so far. I just wanted to create a new template and use all my new knowledge to get everything right from the beginning. But I also sensed that this new knowledge wasn't comprehensive, at all, and so even with the new template, I'd have to go back in and redo things constantly upon learning something new and funky about CSS.
@@i_am_ergo Thank you so much for sharing this so generously, Semyon! 🙏 When you've been working with CSS for years and years, it can become difficult to figure out the challenges of developers digging into CSS for the first time-especially as this certainly changes with time. And as I'm creating content around CSS, your insight will definitely be handy to reach people starting with CSS. 🙂
Lesson learnt Do not use the universal selector for any property inheritable like color, background-color etc but use it for properties that can't be inherited like margin, padding, border-box etc Edited It seems background-color is not inherited but just work only use on the element it is declared on
@@emmanuelxs6143 if he even said that he said that accidentally. Background doesn't have the value "inherit" as default in browsers. If it was inherit by default, then if you set rgba(255, 0, 0, 50) to a parent div, then all child divs would stack transparent background colors on top of each other.
I spent a whole semester doing only HTML and css when I was studying design, so I've never really had any trouble falling in love with css. Until two days ago when I got assigned some email templates at work. Absolute nightmare. I know this is unrelated to the video, but I need to vent.
i just use it only for reset porpouses, only margin, padding, and box-sizing, or maybe, another global property, the issues i often have without this reset drives me crazy sometimes, then, these are the first lines of CSS that i write at the beggining of every project
I just faced the background-color thing last week, so i removed it from * and put it in body selector. I thought It didn't matter but it did and now I know why. 😂
Two years ago, you introduced me to the fascinating world of web development, and I was immediately drawn to your unique approach to CSS, which ignited my love for this dynamic and creative field. As I delved deeper into webdev, I explored diverse frameworks, including tailwind and bootstrap, but my affection for CSS never waned. Watching this video, I am reminded of my humble beginnings two years ago and how far I have come, all thanks to your guidance and expertise. Despite my exploration of different frameworks, my passion for CSS remains as strong as ever.
It's still prefer this way to set up border-box for everything. But for margins, it's overkill. Especially if you plan to use s, which have `margin: auto` by default
Not doing this, but still was interesting to see this... also did not know that transperancy can be changed via hex, that will come hendly on one project.
I was around when we used to use 'clear: both' on everything, but we've seen how new CSS standards like 'flex' have changed that. Given how stable cross-browser styling has become, I'm starting to question "*,*::before,*::after{hard reset}"
@@KevinPowell I have a question. What do you do if your font renders differently in another browser. For example, im using the Roboto font(custom) and it looks good on chrome, but on firefox, its bolder. Any suggestions to make it look better?
Come hang out in my Discord, where a lot of beginners are asking questions, and you'll be amazed at what you see in there :D - The example at the start of my video is literally a copy/paste from code that I came across.
The best use I found for that was box-sizing: inherit for all elements and their :before and :after pseudos, and then using border-box for the :root or html element. Clean, fast, and easily to override whenever you want to use content-box or something else. I forgot where I saw it. Might have been one of Kevin's videos from a few years ago.
My biggest takeaway from Kevin's training is his statement -- ' Don't declare anything you don't need to ' - less is more - for every declaration you add, you add the chance of something not going the way you expect it to. I used to declare almost everything for every element I added - (then spent 30 mins trying to figure out why it was acting the way it was). Learning the inbuilt defaults for each html element lets you know how these are expected to behave, then you can adjust the minimum amount to change this if required.
* { margin:0 } alone can make one's live miserable wasting hours if not days hunting down bugs and adding much more CSS trying to undo the damage it did to every other element. It has way too many unexpected side effects. This was part of an early reset.css from the late 1990ies by Eric Meyer which bachk then helped with Netscape Navigator and MSIE 3-5. It's long been outdated and even Eric never claimed it should be used "as is" on every site. Of course people didn't listen and damage has been done ever since.
I often put flex-wrap: wrap inside this selector. It only applies to the elements that are eligible. I haven't noticed any problems with that thus far. Any thoughts?
* { margin: 0; padding: 0; } causes so many issues when using third-party HTML/CSS within a page. I think it's much better to use normalize.css and embrace the defaults, which are honestly not so bad.
Kevin, I'm a bit disappointed you went back to clickbait thumbnails. I know you shouldn't care about such a small portion of your viewers, but if you do, this type of content presentation is off-putting, and makes me think twice whether i want to view the video in the first place - and whether the title and thumb actually reflect the content. Something to think about. :) Wish you the best, and thanks for the videos!
I only use that to remove padding, margin, and set box sizing. Then handle padding. It's sad that they haven't fixed collapsing margins in nearly 30 yrs. I set body to display flex
"it leads you to a whole bunch of headaches that I don't want you to have" Oh this sounds so caring. It's very rare to hear it put that way. I'll note that
Transparency via hex code??? I have been a web dev for 23 years and you totally blew my mind. I loathe few things in this world more than typing rgba(0,0,0,.2).
yes very nice I only put box-sizing, margin and padding in the * selector anyways Question: which selector is best to set inherited stuff like font-family and color on? is it html, body or :root ?
I am still learning my way around the css selectors while doing a DB front end for a non profit group i love little gems like this ... to me if I can't do the same thing where I NEED to do it ... then why am I even including it - especially if it's going to cause issues in the future ... I very RARELY use * if at all - yes it has it's use case and so does the root selector [my primary use of the root selector is for color variables or other preset variables for easy access]
Is it possible to create a page turning up effect in css. The turn should be vertically up. I tried but didn't work out. Can you please make a Tutorial on it.
Funny to know that most of the CSS libraries nowadays, like TailwindCSS to name one, do exactly that. They remove every possible default styiling, even from headings and stuff. I am not against it tbh
There's no harm in using it for things where it makes sense. It's for things like overflow, smooth-scroll, and any type stuff where it's really not helping out, and often causing problems. People seem to mindlessly throw stuff at it without really knowing why, or understanding the implications... Adam and the others at Tailwind know the implications of what they're doing :)
appreciate the “please don’t - here’s why this breaks things” rather than the more typical YT “you need to STOP doing X right now (idiot)”. One is a teachable moment ready for and encouraging to do better, and the other robs the student of the motivation for self-discovery and further improvement. It’s not that people can’t be idiots and never stubbornly insist on dumb, boneheaded things. Most want to learn, and most want to do better. That’s good for them, and for us and anyone else who later has to maintain their stuff.
Man this week I'm light on tasks on the job, I'm going through all your latest css videos and updating our frontend to use your incredible insights! Amazing! P.s. spamming your urls in all our codebase 😂
@ohuela Thanks for spending so much time to answer me. It will be good if kevin uploads a difference of different values for box-sizing. Appreciate your help buddy!!
I generally use custom margins and padding on most elements, so setting those to zero is a given. Aside from that I just use it for the font on simple websites, as well as for declaring custom variables. (I know, I'm just too lazy to put them in :root)
I think a summary along the lines of "don't use the Universal selector on properties that can be inherited such as color or background-color" would have been appropriate.
Thanks for posting this! Your brilliance is amazing!!!! It's not just how much you know, but how you convey the information that's remarkable. One of the things you said really stuck with me and that's people doing things that are 'easy' but not necessarily the correct way to do things. I understand timelines, deadlines, etc., but I don't think the 'easy' approach is necessarily the best approach. I don't think that necessarily translates to "working smarter", especially when taking the 'easy' approach can bite you later on AND after you've "committed" your project to being based on the "wrong" way to do things. Sorry for the rant and thanks for posting this great video! :)
Setting overflow-x: hidden; also seems to disable the possibility to use position: sticky; top: 0; to make stuff stick to the top of the page, like a navbar.
This was a good video for me. I almost dangerously stepped into this territory with the CSS lecture examples I use. I'll make sure none of my examples use this from now on, except maybe just for border-box lol.
I'm using just the first 3 of them, as I really like to have a quick reset. The Smooth scrolling I put on my html {} and the body gets all font related rules. I hope this isn't too bad ;-)
hi, can anyone tell how to make gradient color smooth transition on a button for example? thank you. Some say it should be done with background position, but I get weird result, looks bad
So I still didn`t catch what the problem with box-sizing inside a universal selector. As for me it`s ok solution. Maybe not very good with perfomance but very useful.
I never said not to use it for that, I was saying not to use it for things that are inherited, or things that can cause havoc down the line, like colors, overflows, etc.
These days, we don't need a really heavy-handed reset anymore. There are some good ones out there. I'd find one that you like, maybe edit it slightly for your own needs, and just stick with that :D
I don't see an issue with it there either, it's for things like smooth-scoll, overflow, and color that I keep seeing people do in my Discord. People throw stuff on it without realizing the implications of what they're doing.
@@DannyHobo To be honest: nothing *needs* to be addressed with *. Because, for example: why should have a padding? It’s just out of convenience and old habits. But I must say: I basically use this since introduction of * and I never had any issues.
Depends what you're doing, but :root is the same as `html`, just with higher specificity (in a regular website anyway). So for typogrpahy stuff, sure :)
There's no harm in using it for things where it makes sense. It's for things like overflow, smooth-scroll, and any type stuff where it's really not helping out, and often causing problems. People seem to mindlessly throw stuff at it without knowing why, or understanding the implications of what they're doing.
I personally add `border: 0;` to my * {} as well, in addition to padding/margin 0 and border-box and set outline 0 on input. It gets rid of the ugly defaults that appear on some elements. I would only do that if you take advantage of specificity often. I also prefer back-end and typescript and generally just like typing and having control. Could be good to use if you have an OOP background or are a full stack dev that prefers having full control over the code.
Thanks Kevin, you inspired me to review the universal selector of my web app and was relieved to discover I haven't done any of the bad things. At least not lately...
I think you can do better than THAT with your TH-cam videos. Your videos are usually packed with information, which is not reflected in your titles. Please avoid using clickbait phrases like '...do THIS' or '...do THAT'. These titles don't provide any valuable information and actually discourage me from watching your videos. They have the same effect on me as red arrows or other gimmicks pointing out the obvious in thumbnails of other creators. I assumed that your target audience is made up of intelligent people seeking valuable content that the title should summarize, not an average crowd driven by unexplainable curiosity to click on vague titles without knowing what they really are. Consider the example of a video with the title "Please NEVER do this in your CSS." What valuable information can one extract from this title? How does it accurately represent the specific content covered in the video? In reality, such a title could apply to at least 50% of your videos, which poses a problem for viewers seeking specific, informative content. While I acknowledge that such titles might generate clicks and views, they do not cater to the needs of educated viewers who value substantive information and expertise. Thank you for taking the time to consider my feedback.
Hey, totally understand what you're saying! In this case, I did try to provide the context through the thumbnail, and while it was a little tempted, I held back on the arrows as well 😅 As a creator, it is about balancing things out, because it is incredible the difference a title can make (of my last 10 videos, this one does have > 2.5x times the views of any other video in the first 1.5 hours after being published). That might sound like I'm chasing views, but I honestly have been seeing this type of stuff a lot in my Discord server lately when people are asking questions (namely beginners who don't know better). The code I show at the start is a copy/paste I got from someone's code in my Discord. Rather than being about chasing views, for me it's more about reaching as many people as possible to help them with a problem I'm seeing. It might sound like the same thing, but I don't feel like I'm misleading through the title. It can't only be about the views, but if I think the content can help people, if I can get more people to watch it, I am hopefully helping more people. Would I rather be able to get this many views with a really straightforward title? 100%. But sadly, as much as people dislike more click-bait style titles, they still click on them a lot more than anything else. Vertiassium has a really good video about this called "legitbait", and it's all about straddling a line without going too far. It's something I think about a lot when I'm creating titles (I spend a lot of time working on them), and it's something where I never want to go too far. With the title/thumbnail combo here, I don't think I did, but it is definitely closer than I usually go.
@@KevinPowell Thank you for sharing your perspective on this topic. I appreciate your effort to strike a balance between creating catchy titles that attract viewers and providing valuable content to your audience. I understand that finding the right balance between a straightforward title and a clickbait title can be a challenging task, but I am confident that with your experience and dedication, you will continue to produce high-quality content that resonates with your viewers. On one side, there are attractive but non-informative titles that can grab the attention of impulsive viewers and generate a large number of views in a short amount of time. On the other side, there are informative titles that may not attract as many viewers initially but can bring in a bigger total number of viewers over a longer period of time because they are optimized for specific keywords that people are searching for. Both approaches have their own pros and cons, and it's up to the creator to strike a balance between them based on their goals and audience. I wish you all the best in your future endeavors, and I hope that your videos continue to help people with their coding problems.
I think some people are missing the point I'm making in this video. I'm not saying never to use the * selector, I'm saying make sure you know what you're doing when you do use it. If you want to set the box-sizing to border-box, or nuke all your margins, go for it. Lately, I've seen people using it for `color`, `font-family` and other things where it just causes all sorts of headaches. That's what I'm advocating against. Sorry if I wasn't more clear.
That actually addresses my question before I asked. cool
Yeah, the first thing that when through my mind when you started this is "Oh, there goes inheritance." To me, this feels like a classic hammer/nail situation. I'm far from a CSS expert, but really, this is one of those things you need to work with, not against.
Never used “*”, but I did use “:root” in a test example the other day.
@@erics2133 I think the main reason this started was the use of libraries and the desire to overwrite their default styling: you want the JS functionality but not the CSS that goes with it. And there the main problem is specificity. By throwing in the “*” rule set after everyone’s CSS, your styles have no competition.
But yes, it is a horrible approach but so is the sluggish world of solving every little thing with libraries. The root problem that started this.
Semitransparent background on it seems like a great idea for sizes debugging. Never thought of it before your example :-)
Do not use *{display:none}
I did that for a challenge once, didn't take people long to work it out 😂
_do it_
Yeah but if you use visibility:hidden you can still keep the all of the elements' spacings correct to maintain the correct body height.
You can't see a problem if you can't see anything.
*{ display: none !important } as well 😂
I just use * to reset margin and padding to zero and set the border box. It's the most basic CSS reset I know and works very well, for me.
css border-box is used for what?
@@micaelalgarrao6043 for everything
@@micaelalgarrao6043 lets say we have a box that is 50px by 50px. If I add a 1px border, the box will be 52px by 52 px now. Border box makes it that the box will always be 50px by 50px.
@@micaelalgarrao6043 the default box-sizing setting makes it so the height and width you set on an element applies to its content box. so if you add border and padding, the element is now actually bigger than what you specified. doing * {box-sizing: border-box} makes it so both padding and border are included in the width and your elements are the size you set them to.
@@missingsemi thank you for the explaination. I like your pfp and name
One of the reasonable use cases for the star selector is to set an outline on all elements to debug potential layout issues.
Something like this: * { outline: 1px solid red; }
It helps you visualize element borders at a glance, which is helpful if one of the elements is causing problems but you're unsure which one or where to look.
100%! Whenever I talk about that, people say "just use your dev tools bro". Clearly they've never had the fun of finding nested elemetns that are causing overflows and other quirky things 😅
@@KevinPowell Clearly! 🙂
And adding opacity to the border (50% or less) will make it even better
@@blackpurple9163 Yes, indeed, that's a great tip! 💯
That is a neat trick, and the semi-transparent background-color is actually also useful for this. If you have the Edge-browser there is a nice devtool called 3D something, that gives you a 3D view of all the nested elements, that is even better for this!
I started learning HTML and CSS a few weeks ago. My god, I'm so lucky I found your channel. It's a friggin' treasure trove of knowledge and great advice!
There is no better CSS resource than Kevin's channel! 💯
What have you found is the most challenging part of CSS until now, Semyon? 🙂
@@CSSWeekly That's a good question. Oddly enough, the answer is not a feature of the technology per se.
tl;dr Coming to terms with the fact that CSS has tons of quirks that you just have to rote-learn.
What I originally typed:
So my wife who's been a Java coder for the last five years and started out with front end, but quickly switched over, recommended that I pick a random, not-too-complex free website template online and recreate it from scratch without looking at the original code. First, in block, then in flex. CSS grid apparently wasn't a thing five years ago? Anyway.
As I learned more and more about how flex works and what certain best CSS practices are and progressed through the template, I had to continuously rewrite portions of what I'd written the previous day. And I was perfectly happy to rewrite stuff that was dictated by pure new best practices knowledge, like culling divs and unnecessary ids and classes, switching h2-h6s around, redoing pixels into rems and percentiles.
But finding out about more and more unintuitive and unpredictable default properties of elements really put a damper on my motivation. Not to learn CSS in general, but just to optimize this test template. I mean, I was going completely by look, naturally using crutch solutions along the way and having to deal with overflows all the time. But when I finished the template and started learning that there were built-in paddings and margins to elements like headings? How style inheritance worked? The way :nth-child() handles a series of siblings with a little cuckoo bird egg in their midst? Etc., etc. Finding the motivation to go back in and redo tons of values, and get rid of the crutches, and the overflow workarounds (or ones I'd left in) that were there because I previously had no way of knowing that CSS had all these unintuitive defaults was probably the hardest thing in the learning process so far.
I just wanted to create a new template and use all my new knowledge to get everything right from the beginning. But I also sensed that this new knowledge wasn't comprehensive, at all, and so even with the new template, I'd have to go back in and redo things constantly upon learning something new and funky about CSS.
@@i_am_ergo Thank you so much for sharing this so generously, Semyon! 🙏
When you've been working with CSS for years and years, it can become difficult to figure out the challenges of developers digging into CSS for the first time-especially as this certainly changes with time.
And as I'm creating content around CSS, your insight will definitely be handy to reach people starting with CSS. 🙂
Lesson learnt
Do not use the universal selector for any property inheritable like color, background-color etc but use it for properties that can't be inherited like margin, padding, border-box etc
Edited
It seems background-color is not inherited but just work only use on the element it is declared on
Background is inherited?
@@theseangle yeah
Try watching the beginning and the ending part of the video
@@emmanuelxs6143 if he even said that he said that accidentally. Background doesn't have the value "inherit" as default in browsers. If it was inherit by default, then if you set rgba(255, 0, 0, 50) to a parent div, then all child divs would stack transparent background colors on top of each other.
@@theseangle okay you right 👍
I only ever use * to reset the margins, padding and box sizing. Pretty sure I learned that from a css youtube channel funnily enough
This channel is hands down, the best channel on TH-cam for css.
Please keep up the great work and know that it is appreciated.
I spent a whole semester doing only HTML and css when I was studying design, so I've never really had any trouble falling in love with css. Until two days ago when I got assigned some email templates at work. Absolute nightmare. I know this is unrelated to the video, but I need to vent.
i just use it only for reset porpouses, only margin, padding, and box-sizing, or maybe, another global property, the issues i often have without this reset drives me crazy sometimes, then, these are the first lines of CSS that i write at the beggining of every project
I just faced the background-color thing last week, so i removed it from * and put it in body selector. I thought It didn't matter but it did and now I know why. 😂
PSA: Please stop forcing smooth scroll. If I wanted it, it’d be configured in my OS/browser/etc. That is all. 😅
Two years ago, you introduced me to the fascinating world of web development, and I was immediately drawn to your unique approach to CSS, which ignited my love for this dynamic and creative field. As I delved deeper into webdev, I explored diverse frameworks, including tailwind and bootstrap, but my affection for CSS never waned.
Watching this video, I am reminded of my humble beginnings two years ago and how far I have come, all thanks to your guidance and expertise. Despite my exploration of different frameworks, my passion for CSS remains as strong as ever.
Ah, thanks so much for taking the time to leave that comment, means a lot to me 🙂
Your way of writing fits well with your username
I'm always use this
*:hover {
display:none;
}
It's still prefer this way to set up border-box for everything. But for margins, it's overkill. Especially if you plan to use s, which have `margin: auto` by default
Not doing this, but still was interesting to see this... also did not know that transperancy can be changed via hex, that will come hendly on one project.
I was around when we used to use 'clear: both' on everything, but we've seen how new CSS standards like 'flex' have changed that. Given how stable cross-browser styling has become, I'm starting to question "*,*::before,*::after{hard reset}"
Yeah, with flexbox and grid, box-sizing is a lot less important than it used to be :)
@@KevinPowell I have a question. What do you do if your font renders differently in another browser. For example, im using the Roboto font(custom) and it looks good on chrome, but on firefox, its bolder. Any suggestions to make it look better?
But...but... chatGPT told me that the fastest way to add css to all my elements was to use the star selector.
I've never seen anyone use color or background in the universal selector. Just box sizing, padding and margin
Come hang out in my Discord, where a lot of beginners are asking questions, and you'll be amazed at what you see in there :D - The example at the start of my video is literally a copy/paste from code that I came across.
@@KevinPowell in that case it's good. Haven't worked with junior devs in years I'm probably out of touch with what's happening
I don't use * a lot, actually. I only apply border-box and reset the margins and that's it
The best use I found for that was box-sizing: inherit for all elements and their :before and :after pseudos, and then using border-box for the :root or html element. Clean, fast, and easily to override whenever you want to use content-box or something else.
I forgot where I saw it. Might have been one of Kevin's videos from a few years ago.
My biggest takeaway from Kevin's training is his statement -- ' Don't declare anything you don't need to '
- less is more - for every declaration you add, you add the chance of something not going the way you expect it to.
I used to declare almost everything for every element I added - (then spent 30 mins trying to figure out why it was acting the way it was).
Learning the inbuilt defaults for each html element lets you know how these are expected to behave, then you can adjust the minimum amount to change this if required.
* { margin:0 } alone can make one's live miserable wasting hours if not days hunting down bugs and adding much more CSS trying to undo the damage it did to every other element. It has way too many unexpected side effects.
This was part of an early reset.css from the late 1990ies by Eric Meyer which bachk then helped with Netscape Navigator and MSIE 3-5. It's long been outdated and even Eric never claimed it should be used "as is" on every site. Of course people didn't listen and damage has been done ever since.
I often put flex-wrap: wrap inside this selector. It only applies to the elements that are eligible. I haven't noticed any problems with that thus far. Any thoughts?
* { margin: 0; padding: 0; } causes so many issues when using third-party HTML/CSS within a page. I think it's much better to use normalize.css and embrace the defaults, which are honestly not so bad.
most userfull
* {
box-sizing: border-box;
min-width: 0;
min-height: 0;
}
Kevin, I'm a bit disappointed you went back to clickbait thumbnails. I know you shouldn't care about such a small portion of your viewers, but if you do, this type of content presentation is off-putting, and makes me think twice whether i want to view the video in the first place - and whether the title and thumb actually reflect the content. Something to think about. :)
Wish you the best, and thanks for the videos!
I only use that to remove padding, margin, and set box sizing. Then handle padding. It's sad that they haven't fixed collapsing margins in nearly 30 yrs. I set body to display flex
"it leads you to a whole bunch of headaches that I don't want you to have"
Oh this sounds so caring. It's very rare to hear it put that way. I'll note that
I am not afraid using * ...
Transparency via hex code??? I have been a web dev for 23 years and you totally blew my mind. I loathe few things in this world more than typing rgba(0,0,0,.2).
yes very nice
I only put box-sizing, margin and padding in the * selector anyways
Question: which selector is best to set inherited stuff like font-family and color on?
is it html, body or :root ?
I am still learning my way around the css selectors while doing a DB front end for a non profit group i love little gems like this ... to me if I can't do the same thing where I NEED to do it ... then why am I even including it - especially if it's going to cause issues in the future ... I very RARELY use * if at all - yes it has it's use case and so does the root selector [my primary use of the root selector is for color variables or other preset variables for easy access]
Is it possible to create a page turning up effect in css. The turn should be vertically up. I tried but didn't work out. Can you please make a Tutorial on it.
While we’re on the topic of CSS bad habits, for the love of God, please do not overuse/abuse !important.
* {
padding: 0;
margin: 0;
box-sizing: border-box
}
This is all you do
This is similar to the problem in programming where improvements in hardware have opened the door to terrible practices in software.
Luckily I found out that this video is not for me 😎 But it's entertaining nevertheless 😊
Lol I can remember back when everyone was saying TO do this . Times have changed
Who's making the mistake..... ✋ haha thanks for this video :)
The CSS god has spoken again ;)
I have this main css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
I'd probably move the list-style: none to a more specific selector. I guess it doesn't hurt being on there, but feels strange to me, lol
there's a typo on your shirt, that's not how you spell Star Trek...
* the meaning of live, the universe and everything
Funny to know that most of the CSS libraries nowadays, like TailwindCSS to name one, do exactly that. They remove every possible default styiling, even from headings and stuff. I am not against it tbh
There's no harm in using it for things where it makes sense. It's for things like overflow, smooth-scroll, and any type stuff where it's really not helping out, and often causing problems. People seem to mindlessly throw stuff at it without really knowing why, or understanding the implications... Adam and the others at Tailwind know the implications of what they're doing :)
@@KevinPowell That is absolutely true. Control and knowing what you're doing is key
Hi Kevin, what VS Code Color Theme do you use?
only for the bloody padding, margin and box sizing
can't you put most of the items !important after it
You made me FALL IN LOVE WITH CSS!
First 20 seconds : don't do it
Rest of the video : why
03:57 the [ Buy now ] button looks different
appreciate the “please don’t - here’s why this breaks things” rather than the more typical YT “you need to STOP doing X right now (idiot)”. One is a teachable moment ready for and encouraging to do better, and the other robs the student of the motivation for self-discovery and further improvement. It’s not that people can’t be idiots and never stubbornly insist on dumb, boneheaded things. Most want to learn, and most want to do better. That’s good for them, and for us and anyone else who later has to maintain their stuff.
Man this week I'm light on tasks on the job, I'm going through all your latest css videos and updating our frontend to use your incredible insights! Amazing!
P.s. spamming your urls in all our codebase 😂
what does box-sizing: border-box; even do? Why does everyone keep it?
@ohuela Thanks for spending so much time to answer me. It will be good if kevin uploads a difference of different values for box-sizing. Appreciate your help buddy!!
tf
I generally use custom margins and padding on most elements, so setting those to zero is a given.
Aside from that I just use it for the font on simple websites, as well as for declaring custom variables. (I know, I'm just too lazy to put them in :root)
I think a summary along the lines of "don't use the Universal selector on properties that can be inherited such as color or background-color" would have been appropriate.
Thanx for the knowledge sharing
Thanks for posting this! Your brilliance is amazing!!!! It's not just how much you know, but how you convey the information that's remarkable. One of the things you said really stuck with me and that's people doing things that are 'easy' but not necessarily the correct way to do things. I understand timelines, deadlines, etc., but I don't think the 'easy' approach is necessarily the best approach. I don't think that necessarily translates to "working smarter", especially when taking the 'easy' approach can bite you later on AND after you've "committed" your project to being based on the "wrong" way to do things. Sorry for the rant and thanks for posting this great video! :)
Setting
overflow-x: hidden;
also seems to disable the possibility to use
position: sticky;
top: 0;
to make stuff stick to the top of the page, like a navbar.
This was a good video for me. I almost dangerously stepped into this territory with the CSS lecture examples I use. I'll make sure none of my examples use this from now on, except maybe just for border-box lol.
I haven't tried this, but from this video I'm inclined to try setting for example * { box-sizing: inherit; } for convenience
I'm using just the first 3 of them, as I really like to have a quick reset. The Smooth scrolling I put on my html {} and the body gets all font related rules. I hope this isn't too bad ;-)
Omg I used to do it and teach that practice to other people. Thanks for sharing. I've just unlearned it haha.
A hack always use is overflow: hidden on main content.
If you do that, then you can't use sticky position 😢
* {border-radius:5px;}
hi, can anyone tell how to make gradient color smooth transition on a button for example? thank you. Some say it should be done with background position, but I get weird result, looks bad
when kevin says "theres no need to make it complicated" the voice in my head says, please do it the complicated way
What I've learned is that everyone will defend their reason for having X in Y. They are always used because they need it to be like that. ;P
I usually only use ist to reset padding and margin, set boxsizing and store global variables eg. colors and angles for skewed elements.
I only set box-sizing, margin and padding on that selector. They're the only things that make sense there.
I like the way that I don't have to be disturbed by Music in your videos, yet I can enjoy your calmly videos ,😊
I like to start by being a bit too specific, then moving properties up to parents as I find I'm repeating myself.
Another great video, and I don't know how you do it, but your videos seem to last half time than actually do
Good thing I only used it for zeroing margins and padding. Saving this for future reference!
i think some developers who are unfamiliar with css mistake * for some sort of a root selector, that is above body and html
Using the * selector to reset the padding and margin will also break the use of modal dialogs, since they are centered with it
I use normalize css to reset
Rule of Thumb: Never use background unless you really need it
The shirt was on spot: * wars
How do you feel about putting font:inherit; in there?
I've 100% done that :D - it is pretty opinionated, but I like how it prevents people using headings for styling as a default
I cannot ever be first
Almost tho
You were the first to be second
Why not?
Goes and checks my sites star selectors, phew. Great video as always!
I only use * selector for padding margin an box sizing
nice t-shirt man.
Tailwind use it for space-x-1
Stone Gossard is teaching CSS courses now?
del "c:*.*"
So I still didn`t catch what the problem with box-sizing inside a universal selector. As for me it`s ok solution. Maybe not very good with perfomance but very useful.
I never said not to use it for that, I was saying not to use it for things that are inherited, or things that can cause havoc down the line, like colors, overflows, etc.
@@KevinPowell ah, ok. I see. I always use it for box-sizing and the title triggered me=)
CSS without inheritance is just SS.
It's very good that you brought it up. And it would be logical to ask: is it necessary to apply Reset CSS? Maybe write something of your own?
I think it's best to use the Reset CSS instead of your own, as it maintained constantly and covers multiple cases that you wouldn't consider
These days, we don't need a really heavy-handed reset anymore. There are some good ones out there. I'd find one that you like, maybe edit it slightly for your own needs, and just stick with that :D
I don't personally see an issue with using it for box sizing and margin/padding. It does what it says on the tin
I don't see an issue with it there either, it's for things like smooth-scoll, overflow, and color that I keep seeing people do in my Discord. People throw stuff on it without realizing the implications of what they're doing.
@@KevinPowell i agree
Great job as always!
For ages I use this “base style” and I’m super happy with it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
font-family shouldn't be there, set it instead on the body
@@DannyHobo To be honest: nothing *needs* to be addressed with *. Because, for example: why should have a padding?
It’s just out of convenience and old habits. But I must say: I basically use this since introduction of * and I never had any issues.
How about the :root selector?
Depends what you're doing, but :root is the same as `html`, just with higher specificity (in a regular website anyway). So for typogrpahy stuff, sure :)
Pro tip: Always use this:-
html, body {
overflow: hidden;
}
Gives massive performance boost.
i think i will still reset box sizing maring & padding as I usually do,
kevin didn't convince me otherwise
There's no harm in using it for things where it makes sense. It's for things like overflow, smooth-scroll, and any type stuff where it's really not helping out, and often causing problems. People seem to mindlessly throw stuff at it without knowing why, or understanding the implications of what they're doing.
huh
i think transparent background is a cool way to see all of your divs
* {
background-color: #00000055;
}
100% I've used this for debugging in the past :)
I personally add `border: 0;` to my * {} as well, in addition to padding/margin 0 and border-box and set outline 0 on input. It gets rid of the ugly defaults that appear on some elements. I would only do that if you take advantage of specificity often. I also prefer back-end and typescript and generally just like typing and having control. Could be good to use if you have an OOP background or are a full stack dev that prefers having full control over the code.
Thanks Kevin, you inspired me to review the universal selector of my web app and was relieved to discover I haven't done any of the bad things. At least not lately...
I think you can do better than THAT with your TH-cam videos. Your videos are usually packed with information, which is not reflected in your titles. Please avoid using clickbait phrases like '...do THIS' or '...do THAT'. These titles don't provide any valuable information and actually discourage me from watching your videos. They have the same effect on me as red arrows or other gimmicks pointing out the obvious in thumbnails of other creators. I assumed that your target audience is made up of intelligent people seeking valuable content that the title should summarize, not an average crowd driven by unexplainable curiosity to click on vague titles without knowing what they really are.
Consider the example of a video with the title "Please NEVER do this in your CSS." What valuable information can one extract from this title? How does it accurately represent the specific content covered in the video? In reality, such a title could apply to at least 50% of your videos, which poses a problem for viewers seeking specific, informative content. While I acknowledge that such titles might generate clicks and views, they do not cater to the needs of educated viewers who value substantive information and expertise.
Thank you for taking the time to consider my feedback.
Hey, totally understand what you're saying! In this case, I did try to provide the context through the thumbnail, and while it was a little tempted, I held back on the arrows as well 😅
As a creator, it is about balancing things out, because it is incredible the difference a title can make (of my last 10 videos, this one does have > 2.5x times the views of any other video in the first 1.5 hours after being published). That might sound like I'm chasing views, but I honestly have been seeing this type of stuff a lot in my Discord server lately when people are asking questions (namely beginners who don't know better). The code I show at the start is a copy/paste I got from someone's code in my Discord. Rather than being about chasing views, for me it's more about reaching as many people as possible to help them with a problem I'm seeing. It might sound like the same thing, but I don't feel like I'm misleading through the title.
It can't only be about the views, but if I think the content can help people, if I can get more people to watch it, I am hopefully helping more people.
Would I rather be able to get this many views with a really straightforward title? 100%. But sadly, as much as people dislike more click-bait style titles, they still click on them a lot more than anything else.
Vertiassium has a really good video about this called "legitbait", and it's all about straddling a line without going too far. It's something I think about a lot when I'm creating titles (I spend a lot of time working on them), and it's something where I never want to go too far. With the title/thumbnail combo here, I don't think I did, but it is definitely closer than I usually go.
@@KevinPowell Thank you for sharing your perspective on this topic. I appreciate your effort to strike a balance between creating catchy titles that attract viewers and providing valuable content to your audience.
I understand that finding the right balance between a straightforward title and a clickbait title can be a challenging task, but I am confident that with your experience and dedication, you will continue to produce high-quality content that resonates with your viewers.
On one side, there are attractive but non-informative titles that can grab the attention of impulsive viewers and generate a large number of views in a short amount of time. On the other side, there are informative titles that may not attract as many viewers initially but can bring in a bigger total number of viewers over a longer period of time because they are optimized for specific keywords that people are searching for.
Both approaches have their own pros and cons, and it's up to the creator to strike a balance between them based on their goals and audience.
I wish you all the best in your future endeavors, and I hope that your videos continue to help people with their coding problems.
You are doing the star for your videos. Every video has the same intro when you should only have one video for explaining yourself
Piep