Please NEVER do this in your CSS

preview_player
Показать описание

For whatever reason, I’ve been seeing a lot of people running into issues because they’re declaring way too many things on their universal selector these days, so in this video I take a quick look at the type of issues that it can get you into, and when you might actually want to use it as well.

⌚ Timestamps
00:00 - Introduction
00:46 - Extreme example with background-color
02:40 - Declaring color
03:45 - Take advantage of inheritance instead
04:14 - When we do want to use the universal selector
06:45 - Only declare things when you need them

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Рекомендации по теме
Комментарии
Автор

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.

KevinPowell
Автор

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.

CSSWeekly
Автор

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.

mahadevovnl
Автор

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!

i_am_ergo
Автор

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 <dialog>s, which have `margin: auto` by default

baileysli
Автор

This channel is hands down, the best channel on YouTube for css.

Please keep up the great work and know that it is appreciated.

StuartAylward
Автор

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.

garibaldidev
Автор

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

emmanuelxs
Автор

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

JoaoPaulo-oxpr
Автор

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.

AivarsLauzis
Автор

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

TheCocoaDaddy
Автор

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?

marjanzivkovic
Автор

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

adarsh-chakraborty
Автор

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 ?

therealsuper
Автор

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.

techlifejournal
Автор

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]

BryceAndEveeNZ
Автор

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.

AppleGameification
Автор

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.

rjhornsby
Автор

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 😂

mooza.shorts
Автор

I don't use * a lot, actually. I only apply border-box and reset the margins and that's it

beinyourguard