Keep Styles Portable and Maintainable with Basic Classes
Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.
[00:00] We're going to jump into the JavaScript and add some classes to the DOM elements that are being generated by React.
[00:05] It's kind of in reverse order than the way we're going to see the DOM elements on the page. We're going to go all the way down to the bottom. We'll see that React is rendering our To-Do App in the element with the ID of Root. We're going to add a class here to To-Do App, this DIV. We're going to set it to be To-Do App.
[00:28] We're going to use the BEM naming structure, which we'll talk about a little bit as we get into more complex names. But it's important to have some standard that you're using for writing your class names so you have less potential for conflicts It's also good for working with teams, that everyone has kind of the same idea what they're going to name things.
[00:45] We have to use the word "classname" here in the definition, because class is a reserved word in JavaScript, and React is using JavaScript and the JSX.
[00:55] Now that we have a class, we can go ahead and style it. Let's go ahead...if we look at the design, we'll see that the To-Do App actually contains the Add To-Do, which is this form, the visible to-do list. We have a to-do, which is here.
[01:14] Then, we've got the footer, which is actually just the filter. It's pretty much the whole application.
[01:20] Let's start by making it that light grey color. We're going to set that to ECF0F1. We want to round the corners on it, so we're going to do border radius. We just want to do the top two corners. It's four pixels, four pixels, zero, zero.
[01:43] We do want to set the width to be 100 percent, which is 100 percent of the parent, which tops out at 730. If we make this a little bit bigger, we'll see that.
[01:52] Then let's go ahead and add a box shadow. We'll do it zero, zero, which means we're not shifting it to the left or the right. Then we've got spread and blur. We're going to set the color. We're going to set it to be black, but we're going to use RGBA, so we can add the opacity at the end. .2 is a little heavy. Let's set it to .1. That's a little bit lighter.
[02:19] Then the max width, we don't actually want it to be the full size, 100 percent. So we're going to set it to be...we're going to calculate the width using 100 percent, but we're going to subtract off 20 pixels. It's going to be just inside there.
[02:42] Then, we're actually going to need to reorder. If we look at the design again, we'll see that the new to-do. We've got the to-do list here. The adding to-do component is in the middle, and then we have the filter on the bottom.
[02:57] To be able to reorder things, we need to set the display to flex. Now we need to set the flex direction, because it defaults to row and we need it to column. Then we're going to align the items or the children in the center, and that's in the direction perpendicular to flex flow or the flex direction.
[03:23] We went ahead and basically styled our first generated JavaScript component.