Every now and then as you write CSS code, you may want to disable a rule or two without deleting it. To do this, you can comment that rule out. This tutorial will show you how to do it.
Suppose you have the following two rules in your CSS stylesheet:
button {
background: blue;
}
button {
background: red;
}To prevent one CSS rule from overriding the other, you need to comment it out.
To do this, add a forward slash followed by an asterisk (/*) to the beginning of the rule and an asterisk followed by a forward slash (*/) to the end. Here’s what this looks like:
button {
background: blue;
}
/* button {
background: red;
} */Notice how the syntax highlighter for the CSS code now treats the second rule as a comment, and not as actual code. That’s how you know that you’ve commented it out successfully before even refreshing the web page that uses this style sheet in your web browser.
You can also add notes to your comments to make your CSS code easier for others to read:
button {
background: blue;
}
/* Disabled - Deprecated in 2/2023
button {
background: red;
}
*/This is especially important if you’re part of a team or you work in a large corporation, and your code is part of a program that’s built collaboratively with other people who won’t know why and when you commented out this chunk of code.
Things to Know
- Close your comments correctly. Make sure to close the comments in the right place, or everything else in your code will be treated as a comment as well, which will case your web page’s design to break.
- Keep two versions of your CSS files. Comments make your CSS files longer, and longer CSS files are slower to load. To prevent your comments from slowing down your web pages, keep two versions of your CSS files — a prettified development version with comments, and a minified production version without.
