Write less CSS by taking advantage of inheritence

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:35 - What we’ll be starting with
01:20 - Apply general typography styles to the html or body element
04:20 - Overwriting inherited properties
05:29 - Using inheritance in more specific areas
06:45 - Why links don’t inherit color and seeing what is and isn’t in your dev tools
09:40 - CSS Demystified
10:40 - Buttons, inputs, and other form elements
13:30 - Be careful with font-size on the HTML element

#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!

[nilaallj]

12:40 Line height is actually included in the font shorthand. :)

[hemantkumarnirmalkar]

I really love it the way you teach css how to make amazing responsive websites.

[LePhenixGD]

Fun fact: You can use inheritance to control pseudo-elements, it really comes in handy for instance if you use JS to play-pause an animation of a pseudo-element via its corresponding element

[Rob-coiz]

Thanks so much, Kevin! Really appreciate the deep dive into this.

[ademolareal]

Thanks! Kevin, this is awesome and for the fact that with css inheritance l will write less of css and for me that's makes the inheritance king.

[LokiDaFerret]

It would be super handy if I had an option in the dev tools to hide styles which are not being applied. In other words take the dimming that it currently does to another level and just not show it whatsoever. That would be handy because it would remove the noise and make it clear where a given element is getting a given property from.

[gbjbaanb]

Yes! The concept of putting a very explicit class on every element to fix the html in a certain design is a very programmer-centric way of viewing html. A designer will prefer to have a boring page that they then style by changing elements in the css. Its very much a opposition between tailwind-style codng and css zengarden-style coding.

I'd love to see a Mr Powell video about the differences in mindset and creativity between these two opposites. Maybe the rise in "classless" css libraries are part of this.

[intsfanatic]

with some of the form elements that have appearance set to none and no color defined, iphone safari tends to hide the text alltogether, thus making the element invisible. I recommend having color defined on inputs and buttons, when using appearance none.

[JohnSmith-opls]

Inheritance is fine in niche cases, where it saves you from complicating logic to change classes, but it can quickly turn into a readability and maintenance nightmare.

You write code once but rewrite it a thousand times. Readability, maintainability, enhance-ability trump a small speed and bandwidth savings from less CSS in almost every case. If you’re writing the next Google search UI, maybe you care more about cutting back on CSS a bit. But you’re not writing the next Google search UI.

[JimKernix]

So how about this: The best way to learn what is inherited and what is not, is to use inherit everywhere that you want it and see if it works, correct? Or would that be duplication when using something like p { font: inherit; }

[moopet]

It's weird to think this is pitched as a "taking advantage of this feature" video. It's the basic way CSS works, it's just that people throw it all away when they use stuff like Tailwind. The number of sites I see where the same styles are copied and pasted across multiple components, and then a change somewhere gets missed and everything starts being a little out-of-whack... but the majority of current developers seem to think inconsistent spaghetti is the way to go.

[AmauryleCour-wt]

Hello,
Can you tell me what is your color theme used in visual code studio ?

[niteshbabu]

Just a tip:
You can set font-size = 67.5% on html,
font-size = 1rem on body.
Now your root font size is 10px instead of 16px & this will make your life a lot easier calculating font sizes.

[jeanclaude]

Thank you! 👍
I have a question. Is it possible to deactivate User Agent Stylesheet from chrome?

[chrisicotec]

i usually add all my main html and body inheritance stuff to my "dirty reset" *, *:before, *:after

[drykofficial]

Setting font in the body, always cross my mind. But I didnt know if its a good practice.

[danielfarrkas]

i've been learning web dev for a couple of months now and no cap I thought text-align can be applied to parent elements only lol.

[Kannada-coder]

Make a carousel we can move manually by swiping also buy click also it should be auto and it should be infinity plze do it in next video I need it

[RandomGeometryDashStuff]

00:23 does css in js mean:

var sheet=new CSSStyleSheet();

;

[Citadelband]

Um you come on the body???? Lmfao gotta find a new word choice lol.