Replace all the colors in your CSS files with variables. Learn about them here!
This is a fantastic technique to clean up our files, but do all browsers support it?
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 Files can get quite large. It is important for them to stay easy to understand and organized.
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
Both CSS files are included in
home/index.html, but only
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.
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.
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.
It is important to keep your files organized in directories. Aside from the directories with your web pages, popular directories include:
stylesto put all your CSS files.
mediato put all your images and videos.
fontsto put all your fonts.
srcto put all your external libraries.
For example, your website directory may look like this:
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.
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.