Prep HTML for Styling with Flat Class Names

Keep Styles Portable and Maintainable with Basic Classes

Reduce Ambiguity in Class Names using a Naming Convention

Style a Form with Plain CSS

Understand Semantic Markup in relation to CSS

Use CSS to Inform Users of Interactivity

Draw Simple Icons with CSS

Use Media Queries to Make an Existing Application Responsive

Inform the User of Interactions with CSS Transitions

Style an Application from Start to Finish

Although it is possible to use javascript and CSS to make a div or span act like any other element, there are a lot of advantages to starting with semantic markup. It helps keep code readable, making it easier to maintain, and it is a big part of making our project more accessible to devices like screen readers. In this video, I replace generic markup with something that is closer to the expected functionality to make it more semantic. I'm also using a [variation of the BEM](https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes) (Block Element Model) naming convention for CSS class names.

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

Course

Style an Application from Start to Finish

Understand Semantic Markup in relation to CSS

Share this video with your friends