Beginner’s Checklist Before Debugging CSS

Beginner’s Checklist Before Debugging CSS

Beginner’s Checklist Before Debugging CSS

I have been mentoring some friends with their web design / front-end development and I noticed a common pattern of mistakes that they tend to make that I would like to share today. Although the following examples may be stating the obvious, it seems most beginners make these mistakes quite frequently. So if you are a beginner, please read on!

Scenario

Beginner CSS Designer Says: “I need help! I added a class on my style sheet, but it didn’t do what I wanted it to do. Must be my css code, can you fix it?”

What Could Be Wrong?
It very well might be your CSS, but before we jump into conclusions, be sure you followed a logical thought process in coming to that conclusion. Narrow down your possibilities, this is how you debug.

Checklist:

  1. Is your style sheet uploaded or saved?
    Are you able to view your CSS code changes in the browser? If you don’t see changes, you failed this step.
  2. Are you referencing your CSS in your html?
    The html will need to reference the style sheet to act upon its properties.
  3. Be sure you are using the right syntax
    • CSS is case sensitive.
    • Cannot start a class name by a digit or a special character (ex: a hyphen ‘-’), and it must start with a character (A-Z).
    • Classes start with a ‘.’ (ex: .classname) and ID’s start with a # (ex: #idname). Be sure you are not missing or mismatching them.
    • Be sure your class/ID is grouped within curly brackets {} and your class/ID properties are closed with a semicolon.
    • Be sure your class/ID names are spelled correctly. As silly as this sounds, we all make mistakes! Double check your spelling whether it’s a class/id name or a property value.
  4. Are you sure you are editing the right site/stylesheet/ file?
    Some people do make these mistakes, which is why it’s important to view your source code thoroughly. Doh! Always double check your source, that’s the first thing you should do!
  5. Did you declare the correct doctype?
    There will be some funk if you don’t declare your doctype (especially with IE).
  6. Is your CSS validated?
    Run a validation on your CSS. It’s always a good to validate your code as you’re developing. This will keep you in check for good coding habits and you will learn from the errors that you will find.

If you verified that the above list is fine, then its time to question your CSS from the behavior perspective. Check out my previous tutorial on how to debug CSS and also equip your self with the right debugging tools for further investigation!

Conclusion

I believe a lot of these mistakes come from lack of knowledge of basic web functions and html. If you find yourself falling in these footsteps, be sure you build proper foundation by fully understanding html and how the web works in general. Once you have the foundation down, and with enough practice, you will gradually find your self debugging a problem within seconds/minutes. Keep it up and don’t give up, your almost there!

 

You may also like...

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>