CSS Part 9: Comments and Final Thoughts

In this ninth and final part of our guide, we discuss how CSS comments work. Additionally, we offer some final thoughts on the language.

In the previous part of our guide, we showed you how to construct a full website framework using boxes, the box model, and clear tags. With so many possibilities opened up by this stage, it’s hard to think of much else to add for someone just starting out in the world of CSS.

Well, there are some last few items to cover. First, we show you how to use comments in CSS. After that, we wrap up with some final comments on CSS.

Comments for Documentation Purposes

If you remember right, HTML has an ability to use comments. The question you may have is whether or not you can do something similar in CSS. The answer is a most definite “yes”. To insert a comment, you need to type in /*. Anything after that is a comment. To close a comment in CSS, you need to type in */.

Now, the most immediately obvious use for comments is to add some additional insight into your code. This can be particularly useful if you want to try and organize your thoughts in the code.

Another use for comments is in collaborations. Let’s say you are working with someone on a website coding project. Leaving comments behind can help that other person understand what you were thinking with a particular piece of code. The code may make perfect sense to you, but another person is going in without all that thought process. So, comments can help with clarity. Let’s look at our CSS project from the last part and offer an example of how to add a comment.

As you can see, I’ve added some much needed documentation for my website. While it may be somewhat easy for an experienced CSS coder to understand the code, these comments can help that coder better understand the thought process behind the code. Not only this, but that coder can understand the coding flow a little better as well.

One important thing to note is that adding comments will not impact the look of the site. Web browsers will ignore everything within the comment tag and read what is found outside of the code.

Comments for Bug fixing Purposes

This, of course, leads us to the other use comments have. Because web browsers ignore anything within a comment, this can be a valuable tool for tracking down bugs. Some bugs are easy to spot. Others can take days or even weeks to track down. So, to demonstrate this, I’ve deleted a critical character in the CSS code below:

Can you spot the error? You might with the naked eye. Let’s look at the results of the code first:

OK, so clearly something went wrong. First of all, my centre panel isn’t displaying properly. I can also see the right panel isn’t displaying at all. Luckily, with my documentation, I can go back and look at a particular part of my code. From there, I can comment out whole rules and see if something fixes it. I can go one at a time here (luckily, there is two rules to check over). First, I’m going to comment out the centre panel. I know it will not display at all, but I want to know if it fixes anything:

When I save this, I get the following in my page:

OK, so my right panel is now displaying somewhat properly. The middle panel isn’t displaying at all. I know that width may play a role in why the right panel is now appearing below everything. So, maybe there is something wrong with the content rule. Sure enough, after reviewing that piece of code, I realize that I forgot an opening curly bracket.

So, I add the opening curly bracket, then delete the comments code. When I save and refresh the page, I see that my page looks great again!

The above example might have been obvious to some of you. After all, the look of the site narrowed the problem down to two possible CSS rules. Not all bugs are this easy to find – especially when you wrote the code. As your designs grow more and more complex as you learn more and more complex CSS rules, this concept gradually becomes more and more useful. Sometimes, bugs have to do with the rule itself instead of a silly type (which, to be fair, can be hard to catch in code in general!).

So, those are two great uses for comments in CSS!

Some Final Thoughts on CSS

So, this wraps up the beginners guide on CSS. Is there more to learn? Absolutely. In fact, there is tonnes more to learn. This guide barely scratches the surface of what CSS can do. That’s not to say that you can’t do anything with what you’ve learned here, though. What you’ve learned here will not only enable you to create some interesting sites, but also enable you to start figuring out more complex CSS codes. Remember, almost any HTML tag can be modified. You can use a host of CSS rules not just through what you’ve learned here, but also elsewhere. A good resource is W3. You can check out the reference material. There is a LOT you can learn in the dizzying amount of CSS available.

While reference material is, indeed, useful, it is not the be all and end all to learning CSS. Almost everything about CSS is open source. That means that if you see something particularly neat on a particular website, right click and view the source code. There should be a CSS file buried somewhere in the header of the page. You’d be surprised what you can learn just by browsing the source code. Just check out the HTML CSS rule in question, then use CTRL+F to find that rule to learn how that rule was accomplished.

A third thought here is testing. The more devices and browsers you can test your code on, the better. Big browsers include Chrome, FireFox, Safari, and Edge. Then there’s also mobile devices if you are brave enough to try your hand at responsive designs. The more devices you can test your code on, the better. The thing to keep in mind is the fact that just because your code works on one browser, it doesn’t necessarily mean it will work on another browser. So, always check if you can. If you find code working on one browser and not on another, you may need to think of an alternative way of coding it (or just coming up with a compromise between the two browsers). You’d be amazed at what browsers can break in your code.

We hope you enjoyed this guide and learned a thing or two.

Congratulations! You are well on your way to knowing CSS inside and out!

< The Box Model and Clear Tags | CSS Index | You are at the last part of the CSS guide! >


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.