Comments in CSS

Example:

body {
  font-size: 62.5%  /* 1em = 10px */
}

The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. In this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow for using ems to set font size later in the CSS in a more intuitive base 10 way.

Comments

  1. User Avatar
    taiger
    Permalink to comment#

    Elaborating..

    /*
    * === MAJOR SECTION HEADING ===
    */

    /*
    * — Minor Section Heading —
    */

    I prefer comment to appear this way, but everyone is different how they comment. One this thing is for sure. You can never comment too much! (as they stripped anyhow in css compression).

  2. User Avatar
    Anoniem
    Permalink to comment#

    I have two little (newbie) questions:
    1. Are comments still the same in CSS3?
    2. What about comments in html5?

    • User Avatar
      MaxArt
      Permalink to comment#

      Yes, of course. CSS3 is CSS.
      You have to include them between <!– and –>. Just like plain old HTML or XML.

    • User Avatar
      me
      Permalink to comment#

      In SCSS, you can use:

      // comment
      

      or:

      /* Comment
      Still a comment
      still a comment */
      
  3. User Avatar
    Ford
    Permalink to comment#

    How is this Comment Preview possible below this? Is this a plugin in WordPress? So cool.

  4. User Avatar
    Emmad
    Permalink to comment#

    I don’t like the fact that you need 4 characters to comment a single instructions on a line! It would have been better to use something simpler in addition to the /* */. For example, SQL uses two consecutive dashes like — which is very easy to use, another one is a single quote at the beginning of the line like VB. Anyway, this is still better than the most silly comment syntax for HTML.

  5. User Avatar
    John C
    Permalink to comment#

    I have a followup question to determine if this is style or need.

    I see basic comments in css as described /* comment */.
    Then I see multi line comments having a * before each new line.
    Finally I will see what implies hierarchy as in this example from the normalize.css on github. Link

    Is this simply style and hierarchy or is there necessary syntax for multi line comments:

    /*! normalize.css v2.1.3 | MIT License | git.io/normalize */

    /* ==========================================================================
    HTML5 display definitions
    ========================================================================== */

    /**
    * Correct block display not defined in IE 8/9.
    */

    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display: block;}

    • User Avatar
      SubGothius
      Permalink to comment#

      Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.

    • User Avatar
      Mark Stewart
      Permalink to comment#

      /////////
      RESET /
      /////
      /
      css
      ///////////////////
      TYPOGRAPHY /
      ///////////////
      /
      css
      /**
      TYPO animation /
      css
      /***
      TYPO animation tooltip */
      css { /
      each to their own */; }

  6. User Avatar
    Bihari Babu
    Permalink to comment#

    Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.

    • User Avatar
      T. Heuser
      Permalink to comment#

      Many coders prefer the // comment // style, However there’s one major advantage to using opening and closing sequences for comments: Since another opening sequence within a comment gets ignored, we have a quick line-based disable for experimental code during development:

      /* width: fit-content; /* unsupported in webkit  */
      
  7. User Avatar
    David
    Permalink to comment#

    I hope you never delete this page, I come back here every time I start a new project!

  8. User Avatar
    jan

    /*! */ the exclamation mark is sometimes to keep an important comment from being deleted when compressing, i.e. licence information.

  9. User Avatar
    LukyVj
    Permalink to comment#

    According to http://cssguidelin.es/#commenting

    /**
     * foo bar baz qux
     */
    
  10. User Avatar
    James
    Permalink to comment#

    What kind of comment is this and is it safe to delete it??

    /*
    @tab Page
    @section Heading 1
    @tip Set the styling for all first-level headings. These should be the largest of your headings.
    @style heading 1
    */

  11. User Avatar
    Jayesh
    Permalink to comment#

    what is Different Between This Media Query

    /* Smartphones (portrait and landscape) ———- /
    @media screen and (min-width: 320px) and (max-width: 480px){
    /
    styles */
    }

    Or

    /* Smartphones (portrait) ———- /
    @media screen and (max-width: 320px){
    /
    styles /
    }
    /
    Smartphones (landscape) ———- /
    @media screen and (min-width: 321px){
    /
    styles */
    }

    • User Avatar
      Joel
      Permalink to comment#

      It’s late but maybe will help someone else:
      The first media only works when the width is 320px or more, and 480px of width or less.
      The second works from 0px to a max width of 320px.
      And the last one works with a width of 321px or more.

  12. User Avatar
    oscar vazquez
    Permalink to comment#

    can anyone give me an example of a multi-line style rule

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag