Writing Reusable CSS Code Methods

Writing Reusable CSS Code Methods

Reusable CSS Methods - Title

Tutorial: How to use reusable CSS Code Methods

Whenever you begin creating larger and larger websites, this becomes an important topic. Starting out, it’s easy to create a new div class for each element you want to edit, but after a few web pages, this become a very tedious process. 

The solution? Begin thinking about how to reuse the CSS you’ve already created across multiple web pages within your website. Let’s jump into some ways to begin using reusable CSS.

  1. Let’s go over a brief reminder of what different CSS tools are available to us. 

Firstly, we have div containers. These are used to specify a certain region of your html file. Think about these as boxes for your html code. 

Reusable Css Methods - Div container

Just like in life how you have boxes for different items: shoe boxes, storage boxes, tool boxes, etc. You should begin thinking about div boxes in the same context.

Div containers are also not unique elements within your html file. That is to say, you can have multiple of the same class names on the same html file – much like how you can have multiple shoeboes in your closet. 

Secondly, you can use an id identifier within your html to target that specific element. These will go within the tags of the element you’re trying to target.

reusable css methods - ID's

Unlike div containers, id’s are unique within an html document. You should only have one of these. The reasoning for this is to be able to access it within your webpage. Much like how on wikipedia you’re able to click a link and go to that area within the document, id’s provide this functionality to the web browser and can do the same for you on your webpages. 

2. Reusable Css Methods – Start with a plan

It’s hard to just sit down and begin coding a website and I discourage it in most situations. There’s a few things you should consider before creating your html and CSS files. 

  • What is the color scheme of your website?
  • What elements of each page do you want to be the same? 
  • What fonts do you want to use? Is it the same font and size across all your paragraph tags? Have you experimented with Google fonts?

Starting with a plan of what elements you want to be the same and in what way will save you a lot of troubles down the road. 

3. Reusable CSS Methods – Let’s get coding

The Layout of your CSS file is going to be super important whenever you begin coding a lot of different elements. 

Every person has their own style, however I’ll share with you my optimal CSS file layout:

  • Site wide elements I want to use repeatedly (Think paragraph fonts, sizes)
  • Repeating element types (Navbars, Footers, Headers that occur site wide)
  • Specific element types (If you want to alter all anchor tags within a section of your site – say for example in testimony sections)
  •  Specific page div containers
  • ID’s if any

/* Site Wide Elements */

.Code{}

/* Repeating Elements – Navbars, Footers, Headers */

.Codeone{}

/* Specific Element Configurations */

.Codetwo{}

/* Specific Page CSS */

/*about.html*/
.Codethree{}

/*index.html*/
.Codefour{}

/* Begin ID CSS */

The above shows what I’m talking about, all this CSS would go into one file and the be broken down into sections. There’s nothing worse than trying to dig through mountains of CSS code to find an unwanted styling that’s interfering with your webpage.

Next, after determining which fonts and styling I want to reoccur throughout my site, I begin creating these elements with an easily rememberable div class name. 

A common one for me is to change font size, text color, and spacing of a webpage heading. Let’s go through an example. say I want each of my blog posts on a page to have the same layout:

 

Reusable CSS Methods - layout

Since I know that I use this webpage layout a lot, I’ll make one div container for this and use it every time I want this repeating element on any of my webpages across my site. To do this you need to be consistent with your html pages as well. 

I’d assume that each html page I was working with would look something like the following:

 

Reusable Css Methods - Default Webpage

Please note that you can use this for an element that repeats on any of your webpages. Not just titles, images and paragraphs. Get creative!

Next, we would need to encase all the elements we want to style repeatedly with a convenient, easy to remember class name. I’ll call this one “Intro” – This isn’t a CSS blog, but the code would look something like the following:

.intro h2{
font-size: 18px;
color: black;
font-family: fantasy;
text-align: center;
}

.intro img{
margin-left: 30%;
margin-right: 30%;
max-width: 40%;
max-height: none;
}

.intro p{
text-align: center;
font-size: 12px;
color: black;
}

Or something like that, don’t hurt me I didn’t test it before hand. 

4. Actually reusing your CSS Code

Now that you’ve identified elements on your webpages that can be styled the same way, let’s use the same CSS styling to make that happen. 

On every page that you want to be styled the same way, you will have to put the same div container around similar elements on your html file. (In our example, place the div class “intro” around the beginning elements of every webpage. )

Then, link each webpage to the style sheet that has the styling. I try to make one master “style.css” for every element that you’re going to use time and time again. But there can be times whenever this gets hard. I’ve had webpages look like the following before:

Css overload

Trust me, you don’t want a mountian of css crammed on to your html files. It makes it extremely hard to begin understanding why one element is being styled in a way you don’t want it to be. Coding should be elegant, and that involves using modular, or repeatable code elements.

Once you have done your highest level, most used styling, drop down to the next section and begin coding styling for elements that may not occur on every webpage, but still occur quite commonly. 

Work your way down the ladder and before you know it, you’ll just have to remember the name of the div class to style your webpages exactly how you want them. 

Bonus Tip

If you have an element that is being styled according to one of your div container classes, and you can’t seem to find where this styling is happen, you can always overwrite it on the individual element level. 

You can do this using the ID tags — also a reason i have them listed on the very end of the styling css file. 

Since ID’s are unique, whatever styling you apply to a id will overwrite any styling applied to the div class the element is contained in. 

Remember, styling ID’s is done in the following format:

#idname element{ }

 

Enjoy the content? Join the Django Development Newsletter!

Leave a Reply

Your email address will not be published. Required fields are marked *