Can you think of one word to describe how it feels to debug CSS code? Pain.
I mean, the language itself is frustrating, what could be worse than that? Ohh yeah, debugging! It’s annoying when you’re designing a page and suddenly you notice that something isn’t quite centred or displayed correctly. There are no warning signs whatsoever and that alone increases the stress level... laughs in pain.
You are definitely not alone, I have experienced this (and still do), but because I practise coding in CSS very often, I have found some ways to debug CSS code without a hassle, to the point where I find debugging CSS code easier than JavaScript. ( Yes, you read that right).
When debugging, it can be helpful to outline elements on the page to figure out how they’re being rendered in relation to one another. You know, the most famous way of debugging CSS code is using this legendary method:
.container {
border: 2px solid red;
}
But there are many other ways to debug CSS code effectively. Here are some ways you can debug your CSS code!
1. Syntax
Yes, check if there's any missing "}" or semi-colon on your CSS code. It happens quite a lot with me that I forget to put the semi-colon after a declaration. Also check if everything is in order with your HTML code.
2. Spelling
There are many developers whom their first language isn't English (like me) and spelling mistakes are quite common. I use UK English and I'm multilingual. At times while I code, I deal with: "Why isn't this text blue?" or "This div isn't centred"!
And yes... the spelling of "colour" to "color" or "centre" to "center" gets me every time (because its US spelling) and its quite exhausting to be honest but hey... we signed up for this! To avoid this, do download the VSCode extension, "Prettier" to help you out.
3. Browser Support
Some CSS and HTML features are not supported by all browsers (e.g Firefox doesn't support backdrop-filter). The problem might not be in your code but the browser itself. Always check and make sure that the HTML elements and CSS properties that you’re using are indeed supported.
4. DevTools
If you’re wondering how your CSS is affecting a particular page element, the Chrome DevTools make it easy to toggle each property. On your preferred browser, right click and select 'inspect'. The DevTools will show you which CSS declarations are being applied to the selected element, and if you hover over each CSS property, you can uncheck them individually and make some changes.
This is useful for deciding whether or not a particular CSS property is a problem and whether or not the CSS you wrote is actually being applied. More about DevTools.
5. Specificity
Is something else overriding your CSS? If you have something more specific overriding what you are trying to do, you can easily troubleshoot. It can happen that sometimes you declare the same element twice, and with specificity, the last declaration has the highest specificity, which will be applied by the browser and will override the first one. Make sure to check the specificity in your CSS code or use the !important property. Example:
External CSS code
h3 {
font-size: 1.4em;
color: blue;
}
NB Inline CSS has the highest specificity, so this rule will override the one above!
<h3 style= "color: red; font-size: 1em;">
Bye World
</h3>
6. The most effective step ever!
Rest, Rest, Rest.
Step Away From The Computer, That's An Order!!!
Go for a walk, grab a drink, draw, paint, hit a child with a ball, play video games, do something. Any coding problem can be frustrating, so if you are becoming frustrated, take a step away from the issue for a while —
Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier. Its no use to spend hours of hours on a problem when your brain is tired and overworked!
Conclusion
As you become more experienced with CSS, you will find that you get faster at figuring out issues. However, even the most experienced sometimes find themselves wondering what on earth is going on! And so I urge you to practise coding in CSS as often as you can, so that you improve your debugging skills effectively. I swear, you won't regret it :)