Debugging CSS Code

Debugging CSS code

This guide is meant to teach you how to fix bugs in your CSS code. If you are not sure if your error is in your HTML, we recommend reading: What is debugging and how to master it.

CSS is a very tricky technology to debug, probably among the most difficult ones; it took me years to master it. I don't say this to scare you, but you need to take it seriously. My goal is to give you a concise guide and tools to quickly become good at it.

Tools for debugging CSS

Your coding editor has syntax highlighting that will help you recognize syntax errors like missing semicolons, curly brackets, etc.

• The Developer Tool: It has two sections that you need to learn and use pretty well:

a) The Elements tab

Shows the HTML tag in your website and which selectors it has. You can look at the class or ID attributes on each tag.

b) The Styles tab within the Elements tab

If you click on one of the tags, the Styles tab will show which styles are being applied to it.

Most difficult errors to find and debug

These are some of the most difficult errors to debug:

Styles not being applied

Do you remember any time in your developer history when you tried applying a style to one element but nothing was happening? No matter what you did, the element stayed the same.

This can happen for several reasons:

• You are using the wrong selector.
• You are misspelling inside the selector.
• There is another style overriding yours (styling conflict).

Follow these steps to fix the error

• Open the developer tools Elements.
• Click on the HTML tag you want to inspect.
• Look at the Style tab, which shows the styles applied to the element.
• Check if your selector and rules are on the list of styles applied to the tag.
• If your selector shows up, you have successfully applied the styles, but other styles may conflict.

🔥 Important: We must remember that many styles are being applied to elements simultaneously; the browser combines all the rules inherited from all the selectors you have created.

Is your style not being applied?

Use the developer tools Elements tab and look for the tag you want to review. Click on the tag and check the styles being applied to it.

If you don't see your CSS Style, it's probably because of a misspelling or a flawed selector logic. Here is an example in the image below:

Note: The class blue was misspelled with bluee, so the styles were not being applied.

Check for CSS Styles and Rule Conflicts

When using the Elements tab on the developer tools, click on any element, and the Styles tab will show all the styles being applied.

If one style is being overridden by another, they will both show, but one will be crossed over with a line.

Note: In the image above, the color CSS rule is being overridden twice.

Other things to prevent

CSS has some hard-to-understand topics that can follow you for years and create a lot of bugs, so please beware and take the time to understand them well.

Absolute vs Relative positioning

Do not use the position property for layouts, use display:flex; instead.

I use the position rule for little things like attaching a notification bubble to an icon. Here is a 10 min video on how absolute vs relative position work.

Flexbox for doing layouts

The most powerful tool for building layouts is flexbox. Here is a 5 min video on how it works.

Master the CSS Selectors

Please take some time to master the basic and advanced CSS selectors. Here are some resources:

• Here is an 8 min video on the basics of CSS Selectors.
• Here is a lesson to help you understand all the advanced selectors that will help you clean your code. Better code.