Beginner’s Checklist Before Debugging CSS
Tags: BeginnerI 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:
- 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. - Are you referencing your CSS in your html?
The html will need to reference the style sheet to act upon its properties. - 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.
- 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! - Did you declare the correct doctype?
There will be some funk if you don’t declare your doctype (especially with IE). - 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.
Không có nhận xét nào:
Đăng nhận xét