Creating Base CSS File & Variables

[00:00:00]
>> Of course, there's nothing in there right now, so nothing's gonna change. But there are a couple of styles we know that we want shared across index and speakers pages, right? So, again, we want our links to not be blue and purple and not underlined. These are shared styles.

[00:00:17]
So what we can do is copy and paste over our styles from the index file to the Speaker's file. That's gonna cause duplication. So anytime I update the index CSS file, I now have to update speakers CSS. And of course your bundle size is gonna quickly blow as well because now you're maintaining essentially two copies of shared code.

[00:00:36]
So the second option here is to have one base CSS file containing all of our code that's used across these pages and share it. So that's we're gonna do. Inside styles we're gonna make a base file, base.CSS. But we need a way to get this CSS file into both of the other page CSS files, right?

[00:01:00]
So we can import this file into both of the HTML pages above the link for our CSS file but there's something a little bit easier. Inside of our index CSS file, we can use this app import. And then linked to the base CSS file like this. So now everything in base is gonna be imported into our index CSS file.

[00:01:21]
Do the same here when we're on speakers. So in our base file, What happens if we wanna change our website background to wait and have our text be orange? Like we do on our speakers page, right? Well, it's kind of an easy fix. We just swapped those values for background color and color.

[00:01:40]
Okay, so that works in this instance. But what if our designers come to us and they say, hey, actually, we want to have a dark theme. Okay, well, that becomes a little more nuanced, right? We don't want to have 1000s of lines of CSS with these hard coded values.

[00:01:54]
So this is where CSS variables can come into play. And this is gonna help us, it's much like other programming languages like JavaScript, we can use variables to reference these different values like color, font size. So let's declare some of these and use them. So inside of our base file, we want to select the root element or defining all of these variables here on the root.

[00:02:16]
So the first one we're gonna define is color primary. We're gonna set this to our hex value, this orange here. So the FF7 B54. I'm gonna copy that over like that. So we've defined our color primary with our orange, and now I'm gonna say color. I'm prefacing this with color so I can look at it and be like, this is a color variable.

[00:02:37]
You can name them however you want. I'm gonna call this text on primary. And this is gonna be our white. Okay, so we've got two. Now you'll notice I didn't call these variables orange or white. I could, I can absolutely call them that. What happens when our primary color for a dark theme, for example, is changed to a navy blue.

[00:02:58]
Well, do I have go rename all these variables? That would be a little redundant. So I'm choosing to use primary, secondary, tertiary, these are the vocabulary terms that am gonna be using. So the primary color of our website is orange. And then if I need to update the color palette, it's much easier to do that.

[00:03:17]
We just change this value and it's gonna propagate. Okay, so we've got our two variables here. Color, primary color, text on primary. Let's go back to our index file here and replace these hardcoded hex values. So to use it, I need to use the VAR function here, and I'm gonna say I want our background color to be the primary color like that.

[00:03:38]
Same thing for color it's gonna be var, color text on primary like that. So if I go back to my homepage, it's rendering properly. So I'll also do this for the font families just in case like we had an identity crisis and wanted to change our entire personality of our website.

[00:04:00]
So I will go back into base. I'm going to create one more variable called font family. I'll call this inter silencer. Same process, a copy this variable name, and then we'll go back to index.css, so many pop-ups. I'm going to replace this here, var font-family, so that works.

[00:04:25]
I'm going to get rid of this bold, that was just for show, but I'm also going to move the body and link styles into that base file. Because these are gonna be shared so just like that. So you shouldn't have any code other than the import now in your index and speakers file, everything should be in base.