Reduce Ambiguity in Class Names using a Naming Convention
A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a variation of the BEM (Block Element Model) naming convention. OOCSS and SMACSS offer similar methodologies. I also use the class attribute selector to target multiple modifier classes.
[00:00] We're using the BEM methodology for naming our classes, and that stands for Block, Element, Modifier. Block is the container that can live by itself. It's the main component. Element is a sub-part of that or a sub-element of that. Then, modifier is if we have variations on either the block or on the element.
[00:20] So, let's look at an example. If we go up to the unordered list that is our to-do list, we can go ahead and give that a name. We're going to call that "toDoList," and that is our block, because our list items, they are dependent on our list.
[00:44] Now, before, we have here some conditional styling. If we added a new to-do item, it would actually put a strikethrough on that using conditional styling dependent on whether the task had been completed or not. That's fine, but we want a better separation between our DOM and our styling, so we're going to use class names.
[01:08] We're going to make that conditional, as well, so let's put in the completed condition. If it is completed, we're going to do our toDoList, which is our block. Then, this is going to be a sub-element of the block, so we need to do two underscores and then the element name, which is item.
[01:28] We're going to have variations on this. We're going to have two different ones. We're going to have one for when it's completed, and we're going to have another one for when it's still active.
[01:39] We've got our block, our element, and our modifier. It's verbose and it's descriptive, but it's only a single class. We'll look at how we can use this to style two of them at the same time.
[01:52] Now that we've got our classes added here, I'm going to come in, and I've already done the CSS. I'm just going to uncomment it. You can see here, the list style, because it is an unordered list, I went ahead and got rid of the bullets, got rid of the margin, got rid of the padding. We want the width to be 100 percent.
[02:18] Then, I changed the order to negative one. If it's at zero, it's ordered this direction, but if we look at the design, we actually need the list to be above it. Thank you, Flexbox, we can reorder.
[02:32] We want to be able to change the flow of this, as well. When we get into making this responsive, we're going to want some of them to flow up depending on the size of the screen. Right now, we're just going to set it to flex and the flex direction to column, because it defaults to row.
[02:47] Now, we want to be able to style the list items, both the completed and the active ones. We can use this selector. We're actually using the attribute selector. This has some Regex-like syntax, which is the beginning of the string needs to start with "toDoList__item," so that's going to be both of these classes.
[03:13] Here, I set the cursor to pointer, because they are just list items. They don't usually have interaction, so we had to add cursor pointer so that it shows that they're interactive.
[03:24] Then, I set the height. I set it to block. I changed it to be uppercase, regardless of what the text has, if camel case or lowercase. Color is just the color of the text, and that actually changes when it is completed. When it's finished, it's green. When it's not finished, it's red. We've got letter spacing, just spreading it out a little bit.
[03:48] I set box-sizing to border-box so that the height takes into consideration also the padding, so 27 pixels doesn't mean 27 pixels plus 80 pixels on the height.
[03:59] Box-shadow, I'm actually using box-shadow to create this separator. You can do it with a border, but you only get one border. Here, I'm actually able to set two box-shadows, and I don't have any blur on them, so they're just two straight lines.
[04:14] One's two pixels. It's the white one. Then, the gray one is one pixel, and it's overlaid on top of it, so you only see one pixel of white and one pixel of gray.
[04:24] Now, we need to go ahead and add our images for the checkbox. If we look back here, we've got a checkbox, and then we've got a check whether it's done or not. I actually just separated out and made two different images. I made them into SVGs so I can just include those as background images.
[04:42] I went ahead and added the background image for box for the unfinished items. It's actually adding them to both, but when it's completed, it's actually getting replaced by the done SVG. If I click on one, you can see it turns to all checkboxes, and that's not exactly what I want.
[04:58] That's a step in the right direction, but we're going to turn off the repeat. We're going to set that to no-repeat. Then, we're going to set the background-position to be 28 pixels from the left and 16 pixels from the top.
[05:24] I actually made these two images the same size. I knew I'd be swapping one out with the other, so I made them with the exact same bounding box and the same dimensions. That box stayed in the same place so that when I swapped one out with the other, there wasn't a jitter or movement of any kind.
[05:38] Now we've taken a look at BEM and how we can name things with a little bit more of a complex structure, how we can use modifiers, and how we can use CSS with the class attribute selector to be able to select multiple versions or those two different variations.