Write less CSS by taking advantage of inheritence
Vložit
- čas přidán 1. 06. 2024
- 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 CZcams 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!
12:40 Line height is actually included in the font shorthand. :)
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
Thanks so much, Kevin! Really appreciate the deep dive into this.
I really love it the way you teach css how to make amazing responsive websites.
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.
Great content as always, thank you
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.
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.
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.
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.
Hello,
Can you tell me what is your color theme used in visual code studio ?
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.
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.
Thank you! 👍
I have a question. Is it possible to deactivate User Agent Stylesheet from chrome?
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.
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; }
Setting font in the body, always cross my mind. But I didnt know if its a good practice.
Great run though!
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.
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.
i usually add all my main html and body inheritance stuff to my "dirty reset" *,*:before,*:after
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
tance! ;)
Just tance
Gonna be okay,
da-da-doo-doot-n
Let's tance!
00:23 does css in js mean:
var sheet=new CSSStyleSheet();
sheet.insertRule(".asd{background-color:red;}");
document.adoptedStyleSheets.push(sheet) ;
14:04 is this recursive definition of rem unit?
InheritAnce
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.
Isn't this the styling that ruins accessibility for people who need a zoomed in view?
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.
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
@@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.
yah, me again,, from Bangladesh
Should be "inheritance" 🙂
This is your new subscriber and very eagerly awaiting your tailwind tutorial and tailwind is amazing and request you to start your tailwind series.
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.
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 :)
Um kevin.....when you come on the body???? Lmfao gotta find a new word choice lol.
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.
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
@@KevinPowell yeah I was thinking the same... Still, going in and showing the user agent style sheet was a teaching opportunity missed. 😊
@@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,.
Inheritance is a sketchy idea in any language
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.
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...
It's much easier to write and maintain than CSS ❤
I think they were using it as an example of a utility class, didn’t really seem to be for or against it.
@@Rust_Rust_Rust You could argue the same for books without linebreaks, paragraphs, capital letters, punctuation, chapters, etc.
It's still dumb.
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.
Imagine being this dumb and not seeing he used it as an example, jeez.. TW is great, btw :)
inheritence is evil
fixing it by adding .text-center all over the tree - rulez!
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.
Everyone is switching to tailwind from CSS
...
No.
No
No.
Tailwind is CSS. Learn basics first