How to write Semantic CSS
VloĆŸit
- Äas pĆidĂĄn 17. 06. 2024
- 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 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!
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!
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. đ€·đ»ââ
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.
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!
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! đđ»
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 â€ïž
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!
This is so true! Kevin is amazing!!
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.
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."
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
This is genius. And avoiding duplicating "selectors" and "accessibility" is also 100X more productive. makes so much sense
Here I go again rewriting my starter theme to support everything you just suggested... it never ends! Thanks for the great tips!
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!
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.
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!
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.
A decade ago there is no Kevin who teaches CSS on CZcams. I always reference your videos for my colleagues, along with MDN docs.
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!
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-"
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
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!
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!
Haha, would love to see that snuck into a production build đ
@@KevinPowell đ€Ł m.czcams.com/video/kEjyfWRTxFM/video.html (clip from Shrek movie, where Donkey sings "I like big butts...") đ”đ¶
he realized the power he had & immediately went mad with it
Hi! Been here since you were at like 100k-200k subs and man this is insane!!!
Brilliant. So simple and it makes total sense. I'll be using it in all my future code.
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
This is a major issue I face, especially now that I'm working on my portfolio. Thanks for the tip đđœ
I love how your kid was amused by writing the class, and even more amused by the look on your face :D
What a coincidence, I was just in the middle of writing HTML-CSS and then you uploaded this video
Great approach, I started using it, and I'm refactoring it now for the faulty Firefox.
Brilliant as always đ
wow i never thought about doing that way, really good tip and giving me a lot of thoughts to think about,
I always follow this approach as this is semantically correct and accessible â€
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.
Fantastic post!
Why can't I click the like button several times? Thank you Kevin!!!
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
totally agree :D, less thinking of names, more meaning
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
Gotta love Kevin's son SirMixALittleâŠ đ€Ł Appreciate the reminder about aria roles for CSS selectors, that's a very useful reminder!
Thanks Kevin. Class names and naming conventions were a real problem for me until I discovered Tailwind :)
"mydadbigbutt"đđ€Ł
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.
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.
Awesome, aaand fantastic!
Thank you sir. It really helpfull. đ
Never knew you could do this with CSS. "That's another fine mess you have put my brain in to Stanley."
I request you to make more videos on accessibility! As this is very important in web
Kevin is a CSS King and Kevinâs son going to be a CSS Hero King.
Awesome examples, Kevem. Is there a CodePen available for this demo?
I dunno, big butt is a pretty good class name
@0:45 that look on your face was a priceless Kodak moment. I couldnât stop laughingđ
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?
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.
@@KevinPowell Ah good thinking actually I very much like this idea. Thanks for the reply đđ
Love the look Kevin gave his son same look I give my son when I want to laugh but know I should not
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.
your kid is my hero :D
Give that kid a raise!
Would be good to see a video where you code out some of the examples we are referring to.
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?
Bravo, agree with this.
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! ;)
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 :)
Hey Kevin, are you using the NVIDIA-dont-look-away-from-the-camera-app :D?
This was very helpful... No if, ands, or butts... I couldn't help myself.
đ„
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 ?
I think they can be used together personally :) - could be an alternative to modifiers in some situations, like you said
I wondered, how am I supposed to achieve this, but it was so fundamental.
Apparently Mozilla are using big butt in their CSS it replaces the hero section... Kevin's face was absolutely priceless đ€Łđ€Ł
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 :)
First video of yours iâve given a thumb up to, for the clip of your kid. đ
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
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.
Time to rewrite my checkbox hacks once and for all
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.
Love CSS Zen Garden!
There's a newer version called Style Stage out there now that I usually point people to now :)
@@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.
Really interesting approach. Are there any performance concerns when using many attribute selectors?
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.
@@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! :-)
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!
Yeah, images are a big topic, could be a fun deep-dive.
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
That's an interesting aspect, never thought of the performance on these things...
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.
I remember it wasn't so long ago when attributes like "aria" and "role" were quite exotic and not really documented.
Thanks!
Thank you!
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.
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.
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
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!
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 :)
@@KevinPowell I didn't knew they had the same specificity, that's awesome, thank you for taking the time to answer.
@@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.
mydadbigbutt is a genius idea for a class đ€Ł
This is why I use react with styled components and save all of this
Even there, you should be using the `aria` attributes though :D
đ„đ„đ„đ„
Getting through about half of this video, I have a somewhat rhetorical question: is there a direct connection between "Semantic code" and #a11y?
Petition to have all front end devs have at least one "mydadbigbutt" class in their projects.
That's my son. 100%.
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?
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
this is what i need, i have a big problem with classnameđđ
interesting... similar to what I was thinking, but using aria-*
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?
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
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.
STILL gonna use your son's class as an Easter Egg in my next personal project.
Credit where credit's due
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?
for sure!
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?
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.
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.
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.
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.
All buttons in a hero section should have a bigbutt class
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
Quick question: would aria-current="true" or even aria-current-page="true" be an option? Is there a reason to prefer aria-current="page"?
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
There used to be a pub near me called "Big Butt Barbecue". Emphasis on "used to".
For the nav part, does that mean that you don't need JS anymore to add/remove the "current-page" class?
You do need it to toggle the aria-expanded though
nice
What's great with aria attributes is you don't need to think of a name.
How does you for your rec camera in square?? Which tool software uses @Kevin Powell ??
I record with OBS đ
This is out of topic, but are you using Nvidia's AI-Powered Eye Contact Feature?
Isn't there a performance penalty selecting on attributes other then class?
From what I've seen, they're pretty much on par.
Wait...
Did you use the NVDIA thing?
đ
Can we use it for React and StyledComponents?
Of course :)
@@KevinPowell Thank you! You are making very good content! đđ
What was that judgmental look? Bigbutt class name is hilarious. Wish I was still that creative.