How to Comment in CSS

UniqueSleek

Editor

posted on 15 years ago — updated on 1 second ago

41
views

Using comments while writing CSS code is helpful for both you and anyone else that may work on or learn from the code. You can use comments to explain potentially confusing functions, quickly prevent blocks of code from being run, and create documentation for the code's features and purpose. You don't need to comment for every piece of code that you write, but good commenting can help everyone involved.

Steps

Familiarize yourself with the CSS comment code.

CSS uses the C-like "comment block"-style comments /*---*/. This allows for multi-line comments, and you can quickly use it to disable portions of your code. /* Everything between the starting and ending tags will be a comment */

Use the comment in the CSS sections of your code.

Only the parts of your page that are processed as CSS will support the comments. This means they will work in your CSS style page, as well as the

This is a standard HTML paragraph. The comments above will not appear on the page.

Use comments to prevent code from being run.

One of the more important uses for comments is to prevent pieces of code from being processed. This is great for testing changes and debugging code.

Use comments to explain potentially confusing code.

You don't need to comment every line of code, but it's useful to include comments for code that may not be obvious. This not only helps people who may be collaborating or learning from your code, it can also help you remind yourself about the function of the code.

Use comments to create documentation within the code.

You can create detailed documentation for your code using CSS comments and other characters. This allows you to explain the function of the program and provide instructions for other coders/users. CSS compression will automatically strip this out when it comes time to run the code, so you don't have to worry about length affecting the size of the file. /*********************************** ************************************ This Makes for a Good Title Header ************************************ ***********************************/ /*========Section Heading=========*/ /*------Sub-Section Heading-------*/ /*This can be the text for each of * for each of your paragraphs. * Adding an * to the beginning of * each line makes it a little easier * for the reader to parse */

Use invalid CSS to create temporary single-line comment.

CSS doesn't have a "single-line" comment function, like // in JavaScript. You can, however, use invalid CSS at the beginning of a line to keep the following function from being processed. This isn't considered good practice for major debugging, but it can be useful in a quick pinch.