Please NEVER do this in your CSS 

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 :-)

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 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 😂

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

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. 🙂

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

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 👍

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?

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.

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

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.

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'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 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

I've 100% done that :D - it is pretty opinionated, but I like how it prevents people using headings for styling as a default

@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 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

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=)

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.

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 :)

Almost tho

You were the first to be second

Why not?

100% I've used this for debugging in the past :)

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.