Prep HTML for Styling with Flat Class Names

[00:00] We'll be stepping through some of the process of styling a React app. What we'll be doing is actually not specific just to React. We'll be talking about good strategies for styling any application. We will be changing some of the React code to be able to make this work.

[00:14] We're starting with an application that Dan Abramov made for his Redux series for Egghead. You can see here that it doesn't have any styling whatsoever. We just have a box. We can add a to-do, we can add to-do items, we can toggle those to-do items, and then we can filter which ones we're actually looking at.

[00:33] I've put together a design, and I made it in Illustrator. I didn't add any interactions, or I didn't try and design out any interactions, because I actually prefer to do that part of the process in the browser. I just start with a static comp with some basic idea of what we're going to be working towards. Then, I tweak from there so that I can test it, how it feels in the browser.

[00:55] I was originally planning on not changing the DOM or the markup at all, but we didn't have any hooks in here to be able to make some nice selectors. If you look, as I inspect this, you'll see that we have one div with an ID of root. That's actually there so that React can render the DOM inside of that.

[01:15] Other than that, we don't have anything with any classes. They're just divs. We have an unordered list and a paragraph. If I wanted to, using CSS selectors, I could try and target specific things in there.

[01:31] You can see here, the CSS, it's not semantic, it's not useful, it's not readable. I don't know what that paragraph is. In fact, it's a little bit weird to me that this is actually a paragraph. It's not readable. It's hard to maintain.

[01:44] On top of that, it also could potentially have some problems with specificity. If we wanted to override things, we have to make sure that we have the same amount or more specificity than the previous rule. This becomes a little bit difficult.

[01:56] The goal is we want to keep everything using flat classes, meaning we don't have combined classes or any other combined selector so that everything has the same specificity. It makes it really easy for updating.

[02:10] First, what we need to do is we need to add some of these classes into our DOM, which his being generated by JavaScript. Then we can start to style it as we go.

[02:19] Let's start by looking at the DOM that's in the HTML. We just have this div that has an ID of root. We are going to add a class to it, because although the idea is great for selecting it for JavaScript, we want to keep everything as flat classes, so let's go ahead and add our own class.

[02:34] We could call it root, as well, but that actually can be a little bit confusing, because there is a reserved word for root, which actually refers to the whole HTML element itself. Although we could have a class like that, we're going to go ahead and call it container just to keep things a little bit separate.

[02:54] On this, we can already start to add some stylings. Let's go ahead and change the font size on the root element. Let's go ahead and set the font size to 16 pixels. I like to set the font size on the root element so that I can use rems as a measurement later on and it refers back to this measurement.

[03:12] Then, we're going to add a font family. We're going to actually add Open Sans. There we go. We're going to have a fallback of just a regular Sans Serif. I haven't added the library yet, so it's just using that Sans Serif. Then, I've got the font weight. I know the smallest font weight I'm going to use is actually 600.

[03:38] I'm going to go ahead and link the style sheet for Open Sans, and I'm just going to stick it in the head here underneath the script tags. There we go.

[03:49] Now, I actually can go ahead and use the shorthand for font. I can set it to 600 for the weight first, and then 16 pixels, and then we can do the Open Sans and the fallback. You can see with the Google Web Fonts, I'm just bringing in 600 and 700 as the weights.

[04:10] We can go ahead and change the background color on the body. We're going to set it to BDC367, which is this grayish color, kind of cloudy. We're going to set the margin to zero, because body has a margin on it, which just gets in the way.

[04:32] Next, we can go ahead and start to style container now that we have that, as well. I know that this application has the content on the bottom, so I know that container needs to be at least the size of the screen. To do that, I'm going to say min-height, I'm going to set it to 100 vertical heights, or VHs.

[04:53] I'm going to set a max width. I don't want it to get beyond 730 pixels, but I do want it to try and use up as much space as possible, so the width will be 100 and the max width is 730.

[05:09] We're going to need the position to be relative, because what we want to do is center this thing. The way you do that is you set the position to relative, and then you set the margin to zero auto. Let's go ahead and turn off some of this stuff. That way, it'll stay 730 pixels, and it'll center that horizontally on the window.

[05:39] To make everything go to the bottom, we're going to set the display to flex. We're going to use Flexbox. Even though container, if we inspect it, only has one div as its only child, but we can still use Flexbox to push that down to the bottom.

[05:58] We're going to use display flex, and then we're going to say flex-direction, and we're going to set it to column. Then, we're going to say align-items, we're going to set that to center, which will center things inside of this container.

[06:15] We're going to go ahead and set the justify-content to flex-end, which is the bottom of the page, so it'll push all the content down there, and anything that grows will grow up from that starting point.

[06:32] Now we have it horizontally centered and positioned at the bottom.