Hot Tips: Organizing All Your Stylesheets

While learning using HTML and CSS together, I was shown by my instructor at Devslopes a nifty way to organize your CSS for your big projects. There is certainly nothing stopping you from using just one file. But especially pending on the size of your project, making it mobile responsive, the number of common themes you want to implement, etc… it’s clear that your one page is going to be very long and hard to organize/keep track of. So, to help combat this, I was shown to split your styling pages into three parts: Your defaults, your styling, and your responsive page. Let’s go over how each works. (Note the alternative names I’ll be giving each section as you read this article.

Default Page (default.css)

This is where all your styling starts. If there was styling you wanted to apply to one element or a group of different elements, this is where you would want to apply it. Setting that base standard before you make specific customizations. Let’s say you want to style all your <h3>’s to look the same. You would write the styling here like you would any other element in CSS. Like this example below that sets the font color, font size, and margin:

h3 {

color: var( — font-color-dark);

font-size: var( — size-40);

margin-bottom: 0;

}

(We’ll get to those “var()” in just a minute)

So now the system knows that this is the base standard for all <h3> in your HTML. Now, if there was specific styling you wanted to apply to individual <h3>, that is for another sheet. For now, half your work is done for you.

What the default is great for is establishing your styling that you want to be globally appliable to your project. And the class you would use the :root pseudo-class. And within there you list the styles that will serve as variables that you can use at any point in your project. This where you would want to list the colors, sizes, and other styling elements you see yourself using more than once. That way, instead of having to remember/write out the same exact rem/px or rgba/hex repeatedly, you can just call those variables in your styling. Just simply write out the variable name(your choice), the color/value you desire, close it out, and then write your next. By the time you’re done creating it, your :root should look something like this:

Now when it comes to calling your variables in your styling, lets go back to the <h3> example. For the font color, when you write out your color:, you would simply write the variable instead of the hex or rgba value. So, as you see in the example, simply call on your variables with var() and, in your parentheses, place your desired variable. This not only can work on your default.css, but all your other stylesheets as well.

Styling Page (styles.css)

There is nothing in particular about how this page is laid out. There is where you would do all your typical CSS for each of your HTML elements. Applying any custom styling that your default.css didn’t already cover. You can also override, in theory override any styling you applied in default on here as well. This more importantly applies to making changes to individual elements that were already styled by default.css. Let’s go back our <h3> example. All our <h3>’s at this moment have the same dark font color we set in default. But say we want one in particular to be red? Then you simply just list the class/id name you assigned it and then apply your desired changes to it. (We’ll call is class= “diff-header”) Like so:

.diff-header {

color: red;

}

So, when the system reads this, it will first got to the default and be like, “Okay, so the <h3>’s all are that dark color they assigned, they need to be this size, and looks like no margin bottom. Gucci.”

It then goes to styles and notices, “Oh hold up. That one <h3> needs to be red. And that one only. Say less, fam.” And then will apply the changes it needs to. Since you made no changes to size nor margin, it will keep those same properties as the rest of the <h3>s on the page.

Also, you can still write out your default variables from your default sheet. So say there was a color or a font size you think will be good for an element, you will can apply it here as well. Just simply write out your var() the same way.

Responsive Page (responsive.css)

You can probably already assume what this page will compose of. This page will be solely dedicated to all your media queries you want to apply to accommodate what device/platform your website is being viewed on. Applying the variables from your defaults applies the exact same way as it does for your last two stylesheets.

Now, how will you make sure this all talks all to your HTML? Nothing fancy, nor what you haven’t done before. Just have your link reference for each of your stylesheets. The one thing to keep in mind is the order in which you list them. So which to put first?

Your HTML is going to cascade your stylesheets. So, you want to make sure the sheet with the lack of overriding styles goes first. Otherwise, it could have a hard time understanding what is what. Because of that: your default.css is going to be your first listed stylesheets. Next, you naturally want to list your styles.css since your responsive.css is your page of adjustments based off what already exists from your default and styles. In the head, your header will look something like this:

Like the desk you sit at, you want your virtual workspace to be as titty as possible. Hopefully this tip helps you out in that department.