Write less CSS by taking advantage of inheritence

Подписаться 913 тыс.

Просмотров 22 тыс.

50% 1

CSS Demystified 👉cssdemystified.com?
🔗 Links
✅ Other HTML & CSS tips for beginners: • HTML & CSS tips for be...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@nilaallj Месяц назад

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

@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-co6iz Месяц назад

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

@hemantkumarnirmalkar2868 Месяц назад

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

@ademola4real Месяц назад

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.

@phkoon Месяц назад

Great content as always, thank you

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

@JohnSmith-op7ls 16 дней назад

You can look at the computed styles, select a property snd see exact where it was set from. In the regular styles view it bubbles up applied styles and crosses out any non-applied properties.

@user-qg7tb2dv6r Месяц назад

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

@moopet8036 Месяц назад

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.

@JohnSmith-op7ls 16 дней назад

Because inheritance makes CCS opaque and more difficult to maintain. People who actually spent decades working with CSS learned this a long time ago and that’s where the push towards explicit, non-inherited properties came from. Readability and maintainability is usually more important than saving some tens of Kb of compressed CSS.

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

@jeanclaude4968 Месяц назад

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

@anarchodin Месяц назад

The UA stylesheet is what applies all the default things, including distinguishing between block and inline elements, making the 'hidden' attribute work, giving form elements a defined appearance, and so on and so forth. So you don't _want_ to do that, especially since reimplementing many of these defaults is not possible in a way that's portable between browsers.

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

@drykofficial Месяц назад

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

@FunDumb Месяц назад

Great run though!

@danielfarrkas1375 Месяц назад

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.

@JohnSmith-op7ls 16 дней назад

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.

@chrisicotec7652 Месяц назад

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

@Kannadacoder360 Месяц назад

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

@xorlop Месяц назад

tance! ;)

@AJ-vy4yu Месяц назад

Just tance Gonna be okay, da-da-doo-doot-n

@aram5642 Месяц назад

Let's tance!

@RandomGeometryDashStuff Месяц назад

00:23 does css in js mean: var sheet=new CSSStyleSheet(); sheet.insertRule(".asd{background-color:red;}"); document.adoptedStyleSheets.push(sheet) ;

@RandomGeometryDashStuff Месяц назад

14:04 is this recursive definition of rem unit?

@phpn99 Месяц назад

InheritAnce

@niteshbabu5731 Месяц назад

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.

@robinheyer708 Месяц назад

Isn't this the styling that ruins accessibility for people who need a zoomed in view?

@KevinPowell Месяц назад

That was a popular trend for awhile, which has mostly fallen out of favor. It *can* work, but if you do it, make sure you set the `font-size` on your body to at least 1.6rem. The biggest "got'cha" with it is if you use 3rd party stuff, it can cause all sorts of issues.

@ChrisShawUK Месяц назад

Why is a font size of 10px easier to work with? If you use rem thoughout, then it doesn't matter about 10px does it? So 1.2 rem means 20% bigger than the root size

Месяц назад

I found it easier to simple set it in pixels... html at 20px (for accessibility, i have a hard time reading small font) then everything else with em

@takhirkikot Месяц назад

@@ChrisShawUK I can see why it's more intuitive, to be honest. Because it's easier to convert pixel values from your design team layout. 25px gap in: - 1rem of 16px equals 1.5625rem - 1rem of 10px is simply 2.5rem It's basically the same argument for the metric system against the imperial one.

@toptravelingoffers7666 Месяц назад

yah, me again,, from Bangladesh

@MikeLevey Месяц назад

Should be "inheritance" 🙂

@mohdali-yq8gq Месяц назад

This is your new subscriber and very eagerly awaiting your tailwind tutorial and tailwind is amazing and request you to start your tailwind series.

@tryoxiss Месяц назад

They have explicitly stated many times why they use CSS for tutorials rather than libraries (sass, tw, bootstrap, etc). They want thier content, even more advanced things, to be understandable by beginners. With utility libraries like tailwind they also can’t do most of the things they show off, or at the very least it makes the point harder to show.

@KevinPowell Месяц назад

Happy to hear you've subscribed! But as Tryoxiss explained, I have no plans for tailwind content. You can take everything I do writing regular CSS and make it work with Tailwind, but if someone doesn't use Tailwind, it's a lot harder to work backwards, so I stick with regular CSS here :)

@Citadelband530 Месяц назад

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

@LokiDaFerret Месяц назад

Kevin, You missed a real teaching opportunity at about 11 minutes and 30 where you state you don't really know why inputs don't inherit typography related information. Yet just a minute ago you were in the dev tools showing us how we can tell what font is being used and where, and the inheritance. You really should have gone to your input, gone into the dev tools and looked at what is applying the style.

@KevinPowell Месяц назад

Oh, I know technically why, same as with why links are blue. I just don't know why they made that decision. Maybe I didn't articulate that well

@LokiDaFerret Месяц назад

@@KevinPowell yeah I was thinking the same... Still, going in and showing the user agent style sheet was a teaching opportunity missed. 😊

@anarchodin Месяц назад

@@KevinPowell It's backwards compatibility. When CSS was originally introduced, link colours were strongly defined by convention so they went into the built-in stylesheets, and because the standards lean strongly on "we won't break existing content" they stay there. The form elements in graphical browsers, on the other hand, were implemented by the operating systems until several years past the introduction of CSS and could not be styled _at all_. When using CSS to style form elements became a thing, they were given UA stylesheet values to look like the OS-provided controls so that existing pages wouldn't change dramatically in appearance,.

@user-xd7zk1pw5y Месяц назад

Inheritance is a sketchy idea in any language

@dripcaraybbx Месяц назад

This is why designers should never have abandoned CSS because programmers are trying to apply programming principles to it. It's why we have div hell because they think each div needs a single responsibility.

@mahadevovnl Месяц назад

Oh, inclusive of the monstrosity of Tailwind now, huh? Please, Kevin, please stick to CSS... don't go to the horrific dark side just for views... you are the One...

@Rust_Rust_Rust Месяц назад

It's much easier to write and maintain than CSS ❤

@tryoxiss Месяц назад

I think they were using it as an example of a utility class, didn’t really seem to be for or against it.

@mahadevovnl Месяц назад

@@Rust_Rust_Rust You could argue the same for books without linebreaks, paragraphs, capital letters, punctuation, chapters, etc. It's still dumb.

@KevinPowell Месяц назад

I was just mentioning that these principals apply even if you're using Tailwind, because I see a lot of this type of mistake from TW users.

@brunocabral88 Месяц назад

Imagine being this dumb and not seeing he used it as an example, jeez.. TW is great, btw :)

@tuananhdo1870 Месяц назад

inheritence is evil

@aram5642 Месяц назад

fixing it by adding .text-center all over the tree - rulez!

@VeitLehmann Месяц назад

No, it's a blessing. Try it, opt out of inheritance with * { font-size: 2rem; color: red } (or to catch all: body * { all: initial }) and see what happens.

@mohdali-yq8gq Месяц назад

Everyone is switching to tailwind from CSS