Your CSS isn’t working right. Sometimes your styles don’t do what you expect them to do. What can you do to find the problem and fix it? Debugging CSS can be challenging.
Photo by Yan Krukov from Pexels
Check for syntax errors
Typos and other mistakes can creep into your CSS. Read it from the bottom to the top. When you read it backwards, you may spot errors.
If you don’t see anything wrong, try using the W3C CSS Validator. It may find something that you missed.
Use the Browser DevTools
Most browsers include developer tools. Use these to help diagnose the problem. You can change, update or comment out code. On MDN Web Docs, you can learn more about FireFox’s Developer Tools. If you prefer Chrome, check out Chrome DevTools.
Does your browser support it?
If the browser you are using doesn’t support the CSS property and value you are using, it will ignore it. You can use Can I use to learn if your browser supports this feature.
Comment out or disable the code
When you comment out the code, you can test and figure out where conflicts are occurring. If that doesn’t work, use DevTools to see if one rule is overriding the one you are working on.
Use borders
Add a border to styles that are causing you trouble. The border can help you to see the relationships between elements.
Double check you are editing the right file
Are you sure that you were editing the right file? Did you copy it from your local development machine to the production server? When you are writing code, it can be easy to have many files open at once. Double check to be sure you edited the right one.
Take a break
Sometimes you need to take a break. Go for a walk, talk to a friend, get some water. Time away from a problem can help you figure it out.
Debugging CSS still not working?
Explain the problem to a coworker or a pet. Sometime talking to someone else about the problem helps you figure out what to do next.