Get Schooled at New Horizons

Info and insights from New Horizons Computer Learning Centers. 22 locations to serve you.
Start exploring

Avoid this easy mistake when troubleshooting CSS code (Cascading Style Sheets)

One of the most common ways of troubleshooting code is to comment out certain parts to see how the application would behave without them. This technique is also highly useful with CSS, since you may want to test how a site would look with certain CSS selectors or property assignments removed. However, commenting sections out using “/*” and “*/” can have unintended effects if code comments (such as descriptions of each set of related selectors) already exist within the section you’re trying to disable.

When the browser encounters the end of the original (nested) comment, it will interpret that as the end of the outer comment. Then, the code up to the closing comment will count, whereas everything after the closing comment (which is seen as a syntax error) will be ignored. Unfortunately, while these consequences are easy to understand in theory, they can be quite mysterious and confusing if you didn’t realize there were already comments inside what you tried to comment out and didn’t notice anything wrong before making additional changes.

An alternative that avoids this problem is to change the CSS directly in Firefox’s Firebug Add-on. Firebug’s Style tab allows you to edit the CSS as interpreted by the browser without actually changing the source code. Instead of commenting code out, you can click to the left of any active property assignment to disable it. This has the following advantages over temporarily commenting out code:

  • You don’t have to reload the page to see the results and don’t need to worry about page caching. Instead, you’ll see the results “on the fly.”
  • Disabling or enabling code in Firebug this way won’t result in accidentally nesting comments.
  • Since the changes don’t affect the source code directly, you don’t need to worry about accidentally leaving in comments or other “test” code that isn’t supposed to stay there.

Leave a Reply