Creating a website can involve a great deal of code. Keeping up with every single choice, option, and the reasoning behind that code can generate a lot of extra work without any form of organization. You can, of course, keep notes on hand to help sort out all these topics and refer to them when needed. However, there is a much better way to handle this. Enter the use of a CSS comment.
As in other code languages like HTML, a comment inside CSS provides a way for the designer to relay details of their work to other developers directly within the code itself. Not only is this a great immediate source of information, but it keeps those details right where they can help the most. You might ask, how do you insert a comment in a CSS file? In this brief tutorial, you will learn just that and more.
Just How Do You Make a CSS Comment?
Adding a comment into a CSS stylesheet is pretty direct and simple. Take the following example CSS code below. You can see it is set up to style a paragraph element with various property sets applied.
Now say that a colleague has asked you to insert details to let them know why you added the styling choices that you used. You can add the text directly into the CSS stylesheet as shown below.
As you can see from the highlighted text at the top, this is pretty easy to do. Yet, without proper comment tags, this causes issues. Notice how the word “style” and the letter “a” are highlighted in red. This is because the code editor knows this is a CSS stylesheet file and is applying syntax rules accordingly. Essentially, the comment as it stands looks like odd broken code to the editor.
Here is where the CSS comment opening and closing sections come into play. To open a CSS comment, you simply start with a forward slash followed by an asterisk. The content of the comment is added after this. To close the comment you add an asterisk followed by a forward slash. See the example below for a more visual representation.
Now, to apply this back into the CSS code example from before, the same opening and closing tags will be placed around the text entered into the editor.
Now the text has gone from being interpreted as a piece of CSS code to a CSS comment instead. Take note of how the color of the text has changed as well. This can vary depending on the text editor being used, however, nearly all will provide some visual representation of the text becoming a comment.
Commenting Out CSS Code
You can also use a CSS Comment to knock out a line of code.. Essentially, the comment tags make the section of code you want to ignore invisible to the editor. This is a great way to test changes in your code without having to delete and rewrite the section over and over as you try new methods. See the example below.
With the background-color property commented out, the cyan color value will not be used as part of the provided CSS code giving the following output.
Now, if the CSS comment tags are removed from the section of code again;
You will have the code editor go right back to reading that section with no issue at all.
Multi-line CSS Comments
CSS Comments do not have to be restricted to one line alone. You can space the comment out along multiple lines using the same opening and closing tags you saw above. Remember that the CSS stylesheet will think everything after the opening comment tag is part of the comment’s content. Until you close that comment tag it will not know where to stop.
This is why multi-line comments are possible. This also provides some much-needed clarity value. Consider if you had four or five points to make on a section of code. You could enter each one as a separate CSS comment. Although, that would be a bit tedious for both parties. Instead, breaking the comment down into multiple lines will make it easier to write and read within an editor.
In the example below, a comment has been added on seven lines. It has an opening and closing set with the content placed within.
This makes the comment easy to read, understand, and it fits in a compact area instead of being dragged out on a single line.
Note that this can be used on the code itself just like a stand alone comment! As in the example before where the background-color property was commented out, it is also possible to simply comment out wide sections of code. Just be careful to add some context comments as to why you choose to do so for yourself or others working behind you.
The Structure and Design of a CSS Comment
In the example provided above, the multi-line comment was broken into seven separate lines. The opening and closing tags we placed on their own lines in that design. This did not have to be the case. The opening tag could have been placed on the line with the first sentence, just as the closing tag would have worked fine on the same line as the last sentence.
The structure of that CSS comment was a design choice. This can be a very important element of how you use the power of comments. For instance, if you worked alongside other designers and the comments you added were totally different than theirs in design.
It would not be impossible to read and work with them, but it would be best to consider a common structure of CSS comments used to work in tandem with everyone else. To illustrate this in effect, take a look at the example below. You can see three separate comments made all on the same simple set of code.
You can see the first comment is very direct and basic and set all on one line. The second CSS comment is broken down with a bit more detail and on multiple lines. The last comment entry not only breaks down multiple lines for details but also adds in reasoning for the code as well as a name/date entry at the end.
Some people may find that this heavy detail flow helps with all comments in a work environment. Others could find it not only excessive but also detrimental to the use of the comment in the first place. This is why it is a great idea to communicate with others on the style and structure of your comments. You could find that all three examples above can be used on a project. It’s simply a matter of making the comment itself useful. If you re-read the comment and find it lacking or confusing, it is a good chance others will as well.
More to Learn: Onward and Upward!
Working in web design provides many opportunities to grow into various other skill sets. Pathways to learning those skills can be found right here on the Udacity blog! Check out easy-to-read introductions on topics like HTML and JavaScript that go hand in hand with great web design skills.
You can even go further with concepts into UI/UX design to really bring home the whole design package. Whichever path you take, comments are going to be a key aspect. Knowing how to add comments to your work is not just important for the aspect of communication, but also for your own concern.
Knowing why you chose to implement an idea over another can help you decide on better choices down the line. Consider if you added a comment that explained you went with option A over option B simply because you did not know how to use option B. Later on, you might find that you can now use option B and with greater effectiveness.
____________________________________________________________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
