How should you comment css? [closed]


Tags: html,css,web,software-design

Problem :

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?

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



Solution :

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

  1. If you are using hacks.
  2. 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 *
 ***********/
#sidebar {
    ...
}
.article-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. And 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 UI elements.

Of course, this still 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.


    CSS Howto..

    How to concatenate XHTML files in Java resolving any possible CSS conflicts?

    How to use CSS to vertically center a form in a div

    How can I float a bunch of divs and still get overflow?

    How can I insert text before an item with CSS?

    How can I make a smooth transition of my input's placeholder text?

    How to represent x and y in svg symbol

    How do i shrink my link menu

    Add CSS Style to textarea that shows XML

    How Do I Make Large Quotation Marks Wrap Properly Around Quotations?

    How to put the menu over the content?

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    How do I span columns with a div based table?

    How to change the mouse cursor over an embedded flash?

    How do I get the element after my horizontal css navigation bar to appear below it?

    How to disable scrollbars in Webmethods 8?

    How to change css content hover effect background color css php in this situation?

    How to properly add margin to elements inside bxSlider

    How to center my menu bar with css. (I am using Microsoft Expression Web 4)

    How to create a cross with pure css [duplicate]

    How to add and remove div's (input)

    How to Change HTML Tags Using Javascript

    How to auto width a form element with CSS?

    CSS question: how to remove the border from an image in WordPress

    how to vertical align div elements using CSS?

    CSS: How to remove the space around? [duplicate]

    How can I fix my CSS code to work with IE (where it shows scroll bars)?

    How does Materialize icons work? [duplicate]

    Check this web optimization report - how can I fix it?

    How to change the background color of a span/div WITHOUT CSS [closed]

    How can I :hover over different links in one line while getting the spacing correct?