back

Lecture 3 (10.31.20) - Organization

Finish These Before Oct. 31st

  • Replace all colors with css variables.
  • Add comments to block CSS files into sections.
  • Use multiple CSS files.
  • Arrange files into directories.
  • Make sure all html files are named index.html.

CSS Variables

Replace all the colors in your CSS files with variables. Learn about them here!

MDN Web Docs

This is a fantastic technique to clean up our files, but do all browsers support it?

CanIUse.com

As you can see, variables are not supported by Internet Explorer. This is where you must know your audience. Ask yourself, who will be visiting your website? Do you expect many IE users to visit? If so, you should probably avoid using CSS variables.

CSS File Organization

CSS Files can get quite large. It is important for them to stay easy to understand and organized.

Multiple Files

Consider a website where every page has the exact same navigation bar, but only the home page has a red background.

In this case, should two CSS files. One site.css and one home.css. Both CSS files are included in home/index.html, but only site.css is included in all other pages.

Use multiple files according to your judgement. Our main goal is to stay organized, but when dealing with small websties, one CSS file could be just fine.

CSS File Struture

Once again, organizing your CSS files is up to your own judgement. However, they should be so clear that anyone should understand what each section does at a glance.

For example:

In this file, you are likely able to guess what the page looks like without even seeing the HTML! This should always be your goal.

File Directory Organization

It is important to keep your files organized in directories. Aside from the directories with your web pages, popular directories include:

  • styles to put all your CSS files.
  • media to put all your images and videos.
  • scripts to put all your Javascript files.
  • fonts to put all your fonts.
  • src to put all your external libraries.

For example, your website directory may look like this:

example

Once again, this is completely up to your team’s preferences. File structure is entirely dependant on whatever a team decides. From company to company, file organization can differ greatly.

Final Thoughts

Organization should be a big part of your career as any software developer. Manipulating files so they are easier to understand will increase your and your team’s productivity.

The organization skills that I have learned in software development have transfered to all areas of my life. I hope that every time you write any code, you will feel as passionate about organization as I do.