HTML & CSS

CSS Comments

    Adam Roberts
    Share

    Every programming language lets you add notes and other hints that help you understand what’s going on. Not all CSS is as understandable at first glance as, say, something like font-size: 20px, so some sections of code can benefit from adding notes or other hints in their vicinity. Here’s an example:

    .cf {
  zoom: 1; /* for IE6 and IE7 */
}

    The comment in this line of code is the part that says “for IE6 and IE7,” and is identifiable as such by the preceding backslash followed by an asterisk, and the asterisk and backslash at the end.

    We can add as many of these to our stylesheet as we like, and it’s good practice to use CSS comments to help identify parts of any stylesheet that might be difficult to understand from a cursory glance. By using CSS comments to make our stylesheets more readable, the CSS will be easier to maintain in the future.

    A CSS comment can span multiple lines if required. Everything that’s in between the opening and closing comment characters will be ignored by the browser, and so will the comment characters themselves. So often you’ll see something like this in a CSS file:

    /***************************
****************************
These are the styles for
the header section
****************************
***************************/

    Notice that, in this example, not only have I included the opening and closing asterisk and backslash characters, but I’ve also added some extra asterisk characters spanning multiple lines. This makes the comment easy to find when scrolling through the CSS file. Add section headings like this in CSS to help organize it into readable, related chunks of code.

    Unfortunately, CSS doesn’t have an easy way to present a valid, single-line comment that uses just an opening comment character combo. For example, in JavaScript, you can comment out a single line of code like this:

    // This is a JavaScript comment

    This is helpful in JavaScript because it makes it easy to nullify an entire line of code, or add a helpful comment, with just two characters (the backslashes). But in CSS it’s necessary to use both the opening and closing characters to specify the boundaries of any comments.

    For quick, temporary fixes, however, it’s acceptable to create a sort of faux CSS comment by applying the principle we discussed in the previous section on CSS errors. Let’s say we have the following CSS:

    .center-global {
  max-width: 1020px;
  margin: 0 auto;
}

    And let’s say we want to temporarily remove the first line (the max-width declaration). We could do this:

    .center-global {
 /* max-width: 1020px; */
  margin: 0 auto;
}

    This works fine, but a quicker way to achieve the same result is simply to put some random characters at the beginning of the line, like so:

    .center-global {
 AAAAmax-width: 1020px;
 margin: 0 auto;
}

    It’s quick and effective, but don’t ever leave your CSS like this on a live website. It’s not valid CSS and should only be used in development for doing quick debugging.