How should you comment CSS?

Question

While developing, most of the CSS I interact with does not have comments, besides the occasional header. As a result, I have gotten in the habit of not commenting my CSS.

However, I often find it would be useful to have comments in CSS that I am working with. Should you comment CSS besides a header indicating an author? If so, how?

I am not asking the process of how to comment, but rather the best practice.

Some people group their CSS by category, and organize it under code blocks like /* INNER PAGES *// or //* RIGHT COLUMN */ and so forth. In general, it'll be appreciated later on if you comment anything that might be difficult to understand otherwise, as well as any special or unusual approaches you've used. — billrichards, Jun 26 '15 at 02:45
You might take a look at the main style.css files for the default WordPress themes. They are generally well commented. For example: https://themes.trac.wordpress.org/browser/twentyfifteen/1.2/style.css?rev=46426 — Dominic P, Jun 26 '15 at 02:46
possible duplicate of [In how many ways and places we can place comment in CSS?](http://stackoverflow.com/questions/2391223/in-how-many-ways-and-places-we-can-place-comment-in-css) — afzalex, Jun 26 '15 at 03:01
Related: *[Is it bad practice to comment out single lines of CSS with //?](https://stackoverflow.com/questions/12298890/is-it-bad-practice-to-comment-out-single-lines-of-css-with/20192639#20192639)* — Peter Mortensen, Jul 17 '18 at 08:28

light · Accepted Answer · 2019-08-19T15:45:33.873

I think there are generally two cases where comments should be used:

If you are using hacks.
To illustrate the page structure.

This may be beyond the question, but you should first ask: how to structure CSS?

With a proper structure, comments make it a breeze to navigate and locate the sections in your page, e.g.

/***************
 * UI Elements *
 ***************/
h1, h2, h3, p {
    ...
}
table, form, input, textarea {
    ...
}

/* Custom Radio button hack: use background-image/position on label */
input[type=radio] {
    display:none; 
}
input[type=radio] + label {
    background-image: url(...);
}
input[type=radio]:checked + label {
    background-image: url(...);
}


/**********
 * Header *
 **********/
#site-header {
    ...
}
#logo {
    ...
}

/***********
 * Sidebar *
 ***********/
#site-sidebar {
    ...
}
.item-in-sidebar {
    ...
}

/**********
 * Footer *
 **********/
#site-footer {
    ...
}

Anyone touching the CSS should have the confidence that editing something in, say, the header section won't affect anything else on the page. If a fundamental change in an element's style is required across all pages and sections, all you need to do is edit the relevant element in the UI Elements portion of CSS.

Needless to say, good CSS structure depends on your markup being well-written and cleanly separated from presentation. If your HTML is afflicted with div-itis, no amount of comments can help save your CSS.

thank you. It helps me modify CSS – Nam Nguyen Apr 10 '18 at 12:20 — Nam Nguyen, Apr 10 '18 at 12:20

score 2 · Answer 2 · edited Jul 28 '18 at 22:03

2

It's not a standard to add comments to CSS, but if you want you can do so. Here is an example of how Daniel Eden, who created animate.css, added a comment in the header of his CSS file:

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/

edited Jul 28 '18 at 22:03

Peter Mortensen

30,030
21
100
124

answered Jun 26 '15 at 02:46

Martin Upelnieks

31
4

score 0 · Answer 3 · edited Jul 28 '18 at 22:02

0

You can comment several lines of CSS like so:

/*
******Commented Out******
*/

Or a single like like so:

#someid {
    width: 90%;
    /* background: black; */
}

edited Jul 28 '18 at 22:02

Peter Mortensen

30,030
21
100
124

answered Jun 26 '15 at 02:40

Spade

591
3
18

score 0 · Answer 4 · edited Jul 28 '18 at 22:02

0

Just use /* ---- */ to comment out some block.

/* .myBtns:hover {
        text-decoration: none;
        color: white;
        cursor: pointer;
} */

edited Jul 28 '18 at 22:02

Peter Mortensen

30,030
21
100
124

answered Jun 26 '15 at 02:41

Greenhorn

570
5
19

HTML comments look like so: `` – Spade Jun 26 '15 at 02:42

score 0 · Answer 5 · edited Jul 28 '18 at 22:02

0

Whether you choose to comment or not is a matter of personal choice. That said, this is how you comment CSS:

/* Single Line */

/* Multiple
Line */

edited Jul 28 '18 at 22:02

Peter Mortensen

30,030
21
100
124

answered Jun 26 '15 at 02:41

Lance

3,721
4
18
29

score 0 · Answer 6 · edited Jul 28 '18 at 22:04

0

You can use /* Comment of CSS */.

edited Jul 28 '18 at 22:04

Peter Mortensen

30,030
21
100
124

answered Jun 26 '15 at 03:16

Cherryishappy

160
1
6

How should you comment CSS?

6 Answers6