Understand Semantic Markup in relation to CSS

[00:00] When styling an app, it's best if we start with semantic uncluttered markup. This isn't just an idealistic approach, it has real tangible benefits. The code is more descriptive, which makes is easier to maintain. It also is easy to predict how the browser or a user-defined style sheet might interact with our styles.

[00:16] Oftentimes, it also makes it easier to style because we actually have a good starting point. If for some reason the style sheet fails to load, things still make sense. They're descriptive. They might even be functional if the JavaScript's coming in. It also goes a long way with accessibility and screen readers.

[00:32] Looking here, Dan Abramov made this app to be a simple example of Redux. He wasn't really trying to make this the most semantic markup possible. He was going for simplicity. Now that we're going to go ahead style it, let's change this and make it easier to style by making it more semantic.

[00:49] First, looking at this footer, this is our collection of links here at the bottom that allows us to filter which ones we're showing. It's a paragraph with text and some links. Actually, links are spans depending on whether they're active or not. Things like the word show here, really hard to style and to target without affecting all the links as well. This becomes more complex. Let's go ahead and change this.

[01:15] Instead of a paragraph, let's go ahead and make this a field set, which also gives us an element called legend, which we can use for the title, fits really well. We'll take out the spaces in between and that comma, because we don't need them. We'll style the spaces in.

[01:32] Then we're going to change all the references from link to radio to make it more descriptive. Also here, instead of on-click, let's change this to be on-change, which is a better event for radio buttons anyway. Here, we'll change it up there. I missed one reference down, there we go.

[01:52] Now that we've got this, let's go up and look at the radio button itself. Let's take out the active state. Instead of a link, let's go ahead and make the main container a label. If you contain a radio button inside of a label that allows us to make the whole thing clickable, which will activate the radio.

[02:13] We'll do type radio. We'll use the name filter, which means all of them on the same group. They'll all be part of the same thing. Then the class name, this is span again, we're going to use filter as the main block. Then this is a module inside, which is radio or an element inside. Then let me just fix the indenting and close this off.

[02:36] The word children here, I want to be able to style just the text that's showing up. I'm going to go ahead and make this a span. The class name. Now it might be a little bit confusing, but I'm actually going to call this filter label. Although it's not a label, we should be more descriptive with what it's doing than what it is.

[02:57] In this case, the label element's actually a container or it's the actual full component. This makes sense as far as the naming convention. Then we're going to add a modifier on it, which we're going to just bring in from the word the children that's coming in, which if we go down and look, we've got all active and completed.

[03:20] By lower casing it, it fits better with the naming convention. We've got to change that last reference to on-click and we're good.

[03:28] Right now, it looks like we might have taken them a step backwards as far as styling. We haven't made any progress, and we've added some weird stuff as far as that border goes. By being more descriptive, it's functional now. It's more descriptive of what it is and it is going to be a lot easier to style.