How to write Semantic CSS

Рет қаралды 91,752

Күн бұрын

Most people know about semantic HTML, but when it comes to CSS, things are a little more wishy-washy most of the time. Rather than relying on arbitrary class names, we can use different semantic selectors though!
🔗 Links
✅ Ben Myers article on Semantic CSS: benmyers.dev/blog/semantic-se...
✅ Using CSS to Enforce Accessibiliity by Adrian Roselli: adrianroselli.com/2021/06/usi...
✅ User Facing State by Scott O’Hara: css-tricks.com/user-facing-st...
✅ Semantic CSS with Intelligent Selectors by Heydon Pickering: www.smashingmagazine.com/2013...
✅ Teaching my 11-year-old HTML & CSS: • Teaching my 11-year-ol...
⌚ Timestamps
00:00 - Introduction
00:16 - The problem with class names
01:36 - How we can write semantic CSS with a navigation
05:42 - Hamburger menu & tab examples
07:00 - How to find the appropriate aria and role attributes
#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 KZfaq 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!

Пікірлер: 201

@KevinPowell Жыл бұрын

A lot of questions and comments about the performance of attribute selectors, so I did a quick test. In my test, a class selector with 10,000 matches was ~0.3ms faster than an attribute selector with 10,000 matches. In other words, you've got bigger things to worry about (screenshot is here: twitter.com/KevinJPowell/status/1623403310785896455 ) They *can* beslower, slower if you use things like $= or *=, but even then, it's not *that* bad!

@Lernschau Жыл бұрын

Nice. Is this only in Edge? or is it just well hidden in Chrome via a dev panel command? (need to check this later) We use tons of attribute selectors, data-foo, aria-bla, and our own. Also many [id=] to avoid specificity troubles and several ~= for data attributes with string lists. After all, html5 doesn't care, CSS doesn't either, and for JS-DOM it's all attributes or dataset. I'd assume the *= |= and ~= selectors could be a tad microsecond slower. They have to match against a whole list of items, whereas ^= and $= only look at the start/end of it. Probably boils down to the browser's regex performance. 🤷🏻‍♂

@harmarize Жыл бұрын

Man when you are a full stack developer, there is just an insane amount of stuff you need to know. Advanced CSS3, assistive tech. A video on accessibility and aria classes and where to use them would be great.

@corriestroup6222 Жыл бұрын

I've been developing now for about a year and, during this time, your channel has been just absolutely a light in the darkness when it comes to sussing out the finer details of CSS. I really do enjoy tinkering around with CSS and any time a new video of yours drops, I have that moment of "Well! Time to fire up a new project and test this out!" Not only has your channel and the videos you put out been inspirational, but they've also been motivational. Thank you, from the bottom of my heart!

@vasyaqwe2087 Жыл бұрын

This is so true! Kevin is amazing!!

@chomo54andbabyaisha97 Жыл бұрын

The prefered way to do it is to not link to current page from current page, and because the tag will be missing in that case, you can also do automatic styling of the current page menu item without using any aria or other, because you inherit the style from the instead. In other words, it should be dealt with on the server side, not client side, if possible.

@F3Ibane Жыл бұрын

I have to second this as someone who has been a developer for over two decades (though primarily systems and back-end). This channel has elevated me from "cobble together something that works" to "actually understand the power and nuance of CSS and be able to apply it effectively to real world situations."

@RILCOMusic Жыл бұрын

Youre doing gods work Kevin. Thank you for being so into CSS, it is my main field of focus in web dev, and your videos make me feel more confident in pursuing better CSS practices. This approach here is much simpler for me as opposed to trying to wire up all the Javascript to handle these style and function changes. Thank you!

@abomidog Жыл бұрын

As someone who just started learning back in mid December, I'm really happy I came across your channel early on in my journey. Thanks for the wonderful videos, Kevin! 👍🏻

@techwithattila Жыл бұрын

I'm super impressed how clearly you are able to articulate these concepts - I will try to adapt some of those into my videos :) Keep rocking!

@kohelet910 Жыл бұрын

This is genius. And avoiding duplicating "selectors" and "accessibility" is also 100X more productive. makes so much sense

@alwinter Жыл бұрын

Here I go again rewriting my starter theme to support everything you just suggested... it never ends! Thanks for the great tips!

@shanedonlon Жыл бұрын

Thank you so much for this. Please keep the accessibility videos coming, they are wonderful, I personally am very very new to development, and I find that watching these is helping instill best practices, and to keep me mindful of accessibility in my projects. As I'm fortunate enough to not require any accessibility features, it's easy to forget that people do require them I once read that accessibility isn't an additional step, if accessibility is missing you've missed a step, and so I do want to keep that mindset up. The internet is for everyone after all ❤️

@DieEneVent Жыл бұрын

I'm a teacher at a vocational school in The Netherlands and I mainly teach Frontend Development, I always tell my students to check your videos out! I don't have enough time to keep up with all the new stuff in development and your video's are an awesome source for me and my students! Thanks Kevin! :D

@daleryanaldover6545 Жыл бұрын

A decade ago there is no Kevin who teaches CSS on KZfaq. I always reference your videos for my colleagues, along with MDN docs.

@Allformyequine Жыл бұрын

OMgosh thanks for the morning giggle! That video with your son was too funny; glad to see you can still make good use of it!! I think I will use a .biggbutt class today on a client's site LOL. Thank you!

@KevinPowell Жыл бұрын

Haha, would love to see that snuck into a production build 😅

@richard_developer_agriculture Жыл бұрын

@@KevinPowell 🤣 m.kzfaq.info/get/bejne/oauarMmIt7rcdoE.html (clip from Shrek movie, where Donkey sings "I like big butts...") 🎵🎶

@ilonachan Жыл бұрын

he realized the power he had & immediately went mad with it

@corey9313 10 ай бұрын

This is excellent Kevin! Accessibility is always pushed to the back because it doesn't look "sexy" in tutorials, but it's really nothing and just takes a little practice to get used to. We all have to take responsibility for end users as designers and coders no matter what

@javabeanz8549 Жыл бұрын

Thanks Kevin! I am working on a site that does exactly what you started with, so now I have the answer to the better way to handle the nav. I rewrote the nav in PHP to act as a component, and detect the current page.

@Mr.RobotHead Жыл бұрын

Fantastic video. I need to be more diligent in properly using "role" and "aria-" properties in general, and this really helps nudge me in that direction as they're useful not only for semantic HTML but in styling as well!

@chomo54andbabyaisha97 Жыл бұрын

It's best to keep the aria at a minimum, or at least not use if you do not fully understand it, and test them too in a screen reader, because using them wrongly could lead to unknown results. Chrome has a screen reader extention, but I don't know how good it is. Linking to current page from current page does not make sense, and it should really be dealt with on the server side, not client side, if possible. Don't send code which is not supposed to be used to the client.

@MrHerbalite Жыл бұрын

I've started using that technique a while ago myself after facing a very complex HTML layout that had to be styled. It occured then to me that those aria attributes that have a state (e.g. aria-expanded="true") act like an if/else statement. After that realization, complex HTML pages have become super easy to develop

@Brunoenribeiro Жыл бұрын

This is brilliant. We do need more a11y enforcement, and this does that AND solve one of the hardest things in engineering: naming things. Thanks for sharing this!

@andreibicu5592 Жыл бұрын

Another great video. I would love to see another one with comparisons and examples on when one should use "aria-*" vs "data-*" vs other semantic attributes out there. Thank you!

@goodshiro10 Жыл бұрын

data- is used for datasets. you can use datasets to get the element based on the value of the datasets using javascript and do random stuff! you can learn more about datasets to know why we use "data-"

@DanielUdechukwu00 Жыл бұрын

This is a major issue I face, especially now that I'm working on my portfolio. Thanks for the tip 👍🏽

@GGdevelopment Жыл бұрын

Hi! Been here since you were at like 100k-200k subs and man this is insane!!!

@slava_trushkin Жыл бұрын

Brilliant. So simple and it makes total sense. I'll be using it in all my future code.

@davidklotz11 Жыл бұрын

Fantastic post!

@379rale Жыл бұрын

Brilliant as always 👌

@avi12 Жыл бұрын

What a coincidence, I was just in the middle of writing HTML-CSS and then you uploaded this video

@melodium10 Жыл бұрын

"mydadbigbutt"😂🤣

@ahmedmayo6239 Жыл бұрын

I love how your kid was amused by writing the class, and even more amused by the look on your face :D

@AndrasSerfozo Жыл бұрын

Great approach, I started using it, and I'm refactoring it now for the faulty Firefox.

@globalentertainment3169 2 ай бұрын

I always follow this approach as this is semantically correct and accessible ❤

@SXsoft99 Жыл бұрын

As a fullstack developer seesing this kind of videos makes me remember back when i just started by writing frontend Now using other technologies to make things dynamic just takes some parts out

@DomboMe Жыл бұрын

wow i never thought about doing that way, really good tip and giving me a lot of thoughts to think about,

@vincentjacquet2927 Жыл бұрын

Thanks for this video and the links to the articles. I have always wondered why people were not relying on the attributes more (aria or data-) and used classes instead. The only argument I found was that class selectors were faster. But, for one, performance is not set in stone and the more people will use attributes, the more important it will be for browser developpers to optimize this, and also I was never sure that when your page is slow it would be because you used attribute selector instead of class selector. The fact that the page is smaller and the javascript simpler should have some weight too.

@retiar2111 Жыл бұрын

totally agree :D, less thinking of names, more meaning

@ssm2015_ita Жыл бұрын

Kevin is a CSS King and Kevin’s son going to be a CSS Hero King.

@MarkoPetejan Жыл бұрын

Even the big butt alone deserves a big like! Anyway, I was avoiding CSS for decades, but now I need to learn more and found out this channel really helps

@knghtbrd Жыл бұрын

Gotta love Kevin's son SirMixALittle… 🤣 Appreciate the reminder about aria roles for CSS selectors, that's a very useful reminder!

@xenoborg007 Жыл бұрын

This quickly breaks down though if you have multiple styles of tab / button etc (Nav buttons for instance can be wildly different to form buttons), or how this would help when styling general divs. As you now have two different "naming" conventions you have to maintain.

@antri27 Жыл бұрын

Why can't I click the like button several times? Thank you Kevin!!!

@outpost31737 Жыл бұрын

Thanks Kevin. Class names and naming conventions were a real problem for me until I discovered Tailwind :)

@igordasunddas3377 Жыл бұрын

I've been developing for over 14 years and while I rarely do frontend most of the time, whenever I do, giving sensible names to CSS classes is really hard (given we don't use tailwind CSS, though I'd argue there are ways to have this semantic CSS along with tailwind CSS). This definition makes things easier in terms of understanding what the hell is going on. Like if you have tabs, make that visible by using role or and aria-current or something! I do think though this can become increasingly harder if you are using UI frameworks, that don't pass on classes by default or encapsulate the rendering of a UI element.

@aCitizenJOSerased Жыл бұрын

Awesome, aaand fantastic!

@hairyhaggis7431 Жыл бұрын

Give that kid a raise!

@globalentertainment3169 2 ай бұрын

I request you to make more videos on accessibility! As this is very important in web

@ToadyEN Жыл бұрын

I dunno, big butt is a pretty good class name

@proteus1 Жыл бұрын

Never knew you could do this with CSS. "That's another fine mess you have put my brain in to Stanley."

@DarrenbyDesign Жыл бұрын

your kid is my hero :D

@ToddMagnussonWasHere Жыл бұрын

Bravo, agree with this.

@anton4488 Жыл бұрын

I like how the naming is done in Bulma. It’s very intuitive and easy to remember. But yeah, it’s not using the accessibility properties for styling.

@challow90221 Жыл бұрын

@0:45 that look on your face was a priceless Kodak moment. I couldn’t stop laughing😂

@FlorinPop Жыл бұрын

mydadbigbutt is a genius idea for a class 🤣

@valentinussofa4135 Жыл бұрын

Thank you sir. It really helpfull. 🙏

@daveskye Жыл бұрын

Would be good to see a video where you code out some of the examples we are referring to.

@PicSta Жыл бұрын

Awesome examples, Kevem. Is there a CodePen available for this demo?

@barrysnelling4412 Жыл бұрын

Love the look Kevin gave his son same look I give my son when I want to laugh but know I should not

@IlPandax Жыл бұрын

Hi Kevin, thanks for your incredible videos. As a mostly backend developer, it's great to have someone who explains frontend that easily. About this video, I don't know much about "aria-*". Do you have a video, or can you shoot one? Thanks again and a big hug from Italy! ;)

@KevinPowell Жыл бұрын

I don't have any specific ones, but I'm trying to save any where it's more of a focus into an accessibility playlist :)

@moonlightCR7 Жыл бұрын

I wondered, how am I supposed to achieve this, but it was so fundamental.

@kohelet910 Жыл бұрын

Thanks!

@KevinPowell Жыл бұрын

Thank you!

@madare Жыл бұрын

Getting through about half of this video, I have a somewhat rhetorical question: is there a direct connection between "Semantic code" and #a11y?

@niner8275 Жыл бұрын

I remember it wasn't so long ago when attributes like "aria" and "role" were quite exotic and not really documented.

@danielk7774 Жыл бұрын

You and I are of the age of CSS Zen Garden, and yes every little thing had an of or class, was made to allow for people to do their own CSS. While roughly 20 years old I suggest people take a look at it.

@KevinPowell Жыл бұрын

Love CSS Zen Garden! There's a newer version called Style Stage out there now that I usually point people to now :)

@danielk7774 Жыл бұрын

@@KevinPowell I'll have to take a look for it. People need to think about how they name their images and folders as well. I'd rather waste the extra bytes to make sure someone after me knows what's going on so name conventions and comments help.

@nikolosnik88 Жыл бұрын

🔥🔥🔥🔥

@e11world Жыл бұрын

This is great info Kevin. Thanks for bringing all this stuff to our attention. I wonder if I have multiple tabs and some needed to be styled differently, then I'd have to use a class or something to differentiate the two or is there a better way of doing this?

@KevinPowell Жыл бұрын

For sure! I think I'd probably use custom properties. Define everything on `.tab-container` or something like that, including the colors or other styles you might want different, then you could have `.tabs-accent-theme` or whatever, and just redefine the custom properties, which would flow through the entire component.

@e11world Жыл бұрын

@@KevinPowell Ah good thinking actually I very much like this idea. Thanks for the reply 👍👍

@brentspotswood Жыл бұрын

Feels like a nice fit with my practice of also using accessibility attributes for my jest tests to help ensure adding accessibility. Why not try in CSS as well?

@Nulledx Жыл бұрын

Hello Kevin, I just recently hopped into the web development field. Could you please give me an advice from where to start and what to practice specifically ? I feel like I'm lost. I have some basic understanding of CSS but when it comes to layout I am not that confident. Any advice is much appreciated :)

@Pete133 Жыл бұрын

Semantic css, specifically having descriptive class names, is what I'm nervous about giving up with a project that only uses TailwindCSS. When I read HTML I look at the class names more than anything else to know what I'm looking at. I'm interested in the benefits of Tailwind, especially when working with other people, but I so much prefer reading HTML with descriptive class names.

@RILCOMusic Жыл бұрын

May I suggest using a blank class name as a semantic placeholder? Then you can use Tailwind to apply styling but you can still use the unstyled class names as a reference for what they structurally do.

@rand0mtv660 Жыл бұрын

I think if you get into Tailwind and learn it, you'll just be able to piece together how something looks like just by reading those Tailwind classes. Also, if switching from project to project and they all use Tailwind, you'll be able to recognize styling just because classes are stanardized in Tailwind. You don't get that benefit with custom styling. Your point about descriptive class names is only valid if people on a project actually gave descriptive names to things and we know naming things is one of the hardest things in programming :D

@DekanTrue111 Жыл бұрын

Please note that attribute selectors might not perform as well as class selectors. In the past (don't know if it still the same) attribute selector doesn't scale well with dom size. A class selector will not take longer to compute if the class is used 1000 times. This is not the case for attribute selectors

@Bempus Жыл бұрын

That's an interesting aspect, never thought of the performance on these things...

@KevinPowell Жыл бұрын

All testing I've seen that's been done in the last 5-10 years has them pretty much on par. It might be fractionally slower, but not enough that you'd ever notice. Browsers are good at rendering CSS these days.

@nefle541 Жыл бұрын

Hey Kevin, are you using the NVIDIA-dont-look-away-from-the-camera-app :D?

@ofmouseandman1316 Жыл бұрын

Thanks for passing that info, i've been trying to implement that approch in my dev for some time .... because while trying to pass a11y to html, you often get some redundency: Some stuff .btn just tells us what it should look like because of its function (that is a button) so i'd trim it. Same thing with .btn-primary ... I mean .primary sure mean nothing and shouldn't be styled that way, but [role="button"].primary or [role="button"].red are workable, meaningfull and accessible! Maybe you might end up with larger CSS, but with smaller HTML.... so I feel that that pattern is kind of the anti-tailwind css :P

@QwDragon Жыл бұрын

With css variables you can style .primary to setup colors and .btn to apply them. You can even make it compatibile with tsx. Also I'm not sure that every role="button" should look like a button. Cancel button is often styled as a link.

@n_mckean Жыл бұрын

What's the impact on non-JS scenarios from a progressive enhancement POV? For the aria-expanded examples, possibly no issue if JS-off always equals expanded, but what about aria-current?

@KevinPowell Жыл бұрын

If you're using a checkbox hack or something as an alternative, you could give it an aria-label of "menu-toggle" or something, and assistive techs would read it as checked or unchecked... Not 100% sure if that's the best solution, but might be worth exploring

@Tutexpert Жыл бұрын

This was very helpful... No if, ands, or butts... I couldn't help myself.

@KevinPowell Жыл бұрын

🥁

@NicholasShanks 10 ай бұрын

First video of yours i’ve given a thumb up to, for the clip of your kid. 😂

@Knards Жыл бұрын

I don't get the aria-current thing. Do you put that on every link? I see you remove it on one, then add it to the next one. I cant get this one to work, the inspector says the background color I have set for the attribute selector is invalid

@Gamesaucer Жыл бұрын

I've heard advice not to style tag names (e.g. ``) and instead prefer to use classes. But that conflicts pretty strongly with semantic CSS, since following accessibility best practices means that you should use a tag rather than a role attribute when available (e.g. `` instead of `role="list"`). So you would then be forced to select something like `.list-widget > ul` instead of `.list-widget > [role="list"]` to comply with semantic CSS practices. What's your perspective on this? Is the advice to not style tag names generally valid but it just doesn't apply to semantic elements in particular, or is it just bad advice?

@madol3728 Жыл бұрын

Great video, very useful ! I just had to build a website using BEM methodology, would that be a replacement to it, specifically the modifier aspect ? Or maybbe both should be used ?

@KevinPowell Жыл бұрын

I think they can be used together personally :) - could be an alternative to modifiers in some situations, like you said

@mcbain1025 Жыл бұрын

That's my son. 100%.

@jakesurrett3518 Жыл бұрын

Time to rewrite my checkbox hacks once and for all

@VEOdev Жыл бұрын

This is why I use react with styled components and save all of this

@KevinPowell Жыл бұрын

Even there, you should be using the `aria` attributes though :D

@nayte91350 Жыл бұрын

Hello Kevin! any thanks for your guides, I always take notes and now I have dozen of thoses about CSS that makes me a better human, for sure. Can you do, I a near future, a 2023's best practices/definitive guide of handling images ? img VS picture tags, responsiveness, ratio, sizes, stuttering, ...? I have trouble to find my way on the internet about this topic!

@KevinPowell Жыл бұрын

Yeah, images are a big topic, could be a fun deep-dive.

@vukkulvar9769 Жыл бұрын

What's great with aria attributes is you don't need to think of a name.

@mao_cmt Жыл бұрын

this is what i need, i have a big problem with classname😭😭

@developerjr8669 Жыл бұрын

How does you for your rec camera in square?? Which tool software uses @Kevin Powell ??

@KevinPowell Жыл бұрын

I record with OBS 🙂

@mahadevovnl Жыл бұрын

What's your take on using data-attributes for CSS? I'm thinking there's something to it, but I'm not sure what yet. Specificity is a little different than class names I know, but data-attributes can contain different types of data, and their selectors can be a little bit smarter, maybe? Is changing a class different than a data-attribute, performance wise? Of course, JavaScript knows about "classList" and data attributes are "dataset". Perhaps it makes programming them more intuitive, which could be beneficial?

@KevinPowell Жыл бұрын

I've been using them a lot instead of modifier classes. If you look up CUBE CSS, it looks at doing that and I quite like it

@QwDragon Жыл бұрын

Specificity is the same. But flexibility can be better. Dataattributes can contain only strings and nothing else. I've never seen performance problems due to selector unlike the styles themselves. Actually I've seen a slow selector in IE8 but is was used to search in document via jquery multiple times. Don't think it would've been that bad in css, but haven't checked.

@KarimMaassen Жыл бұрын

Quick question: would aria-current="true" or even aria-current-page="true" be an option? Is there a reason to prefer aria-current="page"?

@KevinPowell Жыл бұрын

We have to use aria-current=page. Aria is a specification, sober can't make our own, we have to follow the standard, since assistive technologies use it, and they are built around that standard

@radoslavsk8591 Жыл бұрын

I found that some websites are overbloatted with this "semantics" attributes and must have some generators i think to print them out all correctly. Alltrought its good for accessibility, the css attribute selectors are not well supported yet and may become ultralong and dom load slow when you have too much semantics elements defined in the dom.

@KevinPowell Жыл бұрын

How are attribute selectors not well supported? Part of building something is building it correctly. You don't build a bridge without proper reinforcments because it won't look at nice. Might be a bit of an extreme example, but just because we don't like the "look" of all the extra attributes on something doesn't mean it shouldn't be there if that's the correct way to build something.

@alanbloom20 Жыл бұрын

Really interesting approach. Are there any performance concerns when using many attribute selectors?

@KevinPowell Жыл бұрын

afaik, they're on par with class selectors. Might be more work for the browser if you use the fancy things, like $= or |=, but for what I look at here, I don't think there'd be a difference.

@alanbloom20 Жыл бұрын

@@KevinPowell good to know - I had come across a recommendation against unqualified selectors as they act like * selectors but personally haven’t found any issues when using them. I think this is a great technique to use! :-)

@johnryder8464 Жыл бұрын

Apparently Mozilla are using big butt in their CSS it replaces the hero section... Kevin's face was absolutely priceless 🤣🤣

@eronorbi Жыл бұрын

For the nav part, does that mean that you don't need JS anymore to add/remove the "current-page" class?

@KevinPowell Жыл бұрын

You do need it to toggle the aria-expanded though

@carloautor Жыл бұрын

This is out of topic, but are you using Nvidia's AI-Powered Eye Contact Feature?

@FranciscoMorales-qk4ux Жыл бұрын

Interesting video as always, but I have a question. If you reference the role or the aria of an element with css, ¿Doesn't that raise the specificity of your style, thus creating overwrite problems? Greetings from Chile!

@KevinPowell Жыл бұрын

an attribute selector has the same specificity as a class selector, so it doesn't have to... I'd also argue if you're doing something like `.tab[aria-selected="true"] which does have higher specificty, that's probably fine anyway :)

@FranciscoMorales-qk4ux Жыл бұрын

@@KevinPowell I didn't knew they had the same specificity, that's awesome, thank you for taking the time to answer.

@chomo54andbabyaisha97 Жыл бұрын

@@KevinPowell As a side note. < img /> _"Trailing slashes in void-element start tags do not mark the start tags as self-closing"_ ...is what I get from the validator. It means, you can use the trailing slash if you think it looks nice, but it serves no other purpose or function. The fun thing is, on MDN's page about img, they use both options, both with and without trailing slash. Seems like they are confused too. But it looks like the HTML standard is moving away from using the trailing slash (which is a left over from XHTML which I wonder if anyone uses anymore), and the first push in that direction is the validator info about it.

@pierrecarre9225 Жыл бұрын

Realy interesting subject. Nevertheless I notice one point in your presentation that is "weired". The semantic was about the class current-page. And you convert it to an attribute aria-current="page". That's a small mistake: you should use aria-current-page="Home" (then About, Contact,... according to the current url) Thus, your css selector must be [aria-current-page] i.e. any current menu element (unless you need a specific color for each item) For your demonstration, using the class "current-page" or the attribute "aria-current-page" is semantically equivalent.

@KevinPowell Жыл бұрын

We need to use `aria-current="page"`, there is no such thing as aria-current-page. Aria attributes follow a standard, and in this case, the `aria-current` one is to let people know the link they are on is the current page, the same way we often style that link differently with CSS to visually indicate things. There is no `aria-current-page` attribute.

@jokinglimitreached1503 Жыл бұрын

interesting... similar to what I was thinking, but using aria-*

@seansopata5121 2 ай бұрын

All buttons in a hero section should have a bigbutt class

@thesonicguile Жыл бұрын

Isn't there a performance penalty selecting on attributes other then class?

@KevinPowell Жыл бұрын

From what I've seen, they're pretty much on par.

@christian-schubert Жыл бұрын

STILL gonna use your son's class as an Easter Egg in my next personal project. Credit where credit's due

@thereisnoname2052 Жыл бұрын

can anyone help me main{ height: calc(100vh - 126px); position: relative; overflow: hidden; } main h1{ position: absolute; top: 50%; transform: translateY(-50%); width: max-content; left: -100%; /* i want to move with 100% from the width of the element (h1) not the width of the parent element (main) */ font-size:35px ; animation: fly 10s linear infinite; }

@jenstornell Жыл бұрын

Instead of letting every a-tag have a class, maybe style it based on the wrapper instead as well using the semantic ul li a?

@KevinPowell Жыл бұрын

for sure!

@jasper5945 Жыл бұрын

nice

@Aprch Жыл бұрын

Wait... Did you use the NVDIA thing? 👀

@wolverine9632 Жыл бұрын

There used to be a pub near me called "Big Butt Barbecue". Emphasis on "used to".

@fadehelix Жыл бұрын

Isn't it kind of a return to styling elements which was always considering as a bad practice?

@KevinPowell Жыл бұрын

Only reason we don't style elements directly is element selectors tend to be too vague. If I need my paragraphs to have a specific style, I'm styling the p tag, and not giving them all a class 🤷‍♂️

@sntxrrr Жыл бұрын

I've had discussions in the past about semantic class names (note the subtle difference) but that was stupid. Per spec class names are meaningless to the browser so the question becomes semantic for who? And the answer is other developers. Part of writing good code is that other devs can understand it and class names are a way of communicating with your colleagues.