Comments In CSS | CSS-Tricks (2024)

taiger

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).

Anoniem

Ford

Emmad

John C

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;}

Bihari Babu

David

jan

LukyVj

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

/** * foo bar baz qux */

James

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
*/

Jayesh

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 */
}

oscar vazquez

Clinton Gallagher (@tapABILITIES)

Muhammad

Hello,

Does including a lot of comments in your css increases your css file, therefor slowing your site down? I need to know this so I choose my commenting strategy.

Nico

I used this website because w3schools.com has only HTML comments, not CSS comments. I found some new selectors that I didn’t know since I started CSS. Let’s use the h1 for example.

h1 { // border sets the whole border border-top-style: 5px solid orange; border-left-style: 5px double pink; border-right-style: 16px inset blue; border-bottom-style: 5px outset purple; text-align: center;}

Wheat

Daniil Postnov

I use

/* ------------ styles block ------------ */.class{}

and

/* ------------ /end styles block ------------*/

for end styles block

Philips Ekuma (@iamfhil)

Guys a quick one! How do you select an HTML comment tag <!-- Comment --> using CSS.
Say I have:

<section class="container"></section<!-- Team Members --><section class="container"></section><section class="container"></section>

And I want to select the container class immediately after the comment. How do I do that?

Aidan Doyle

Please excuse the noob question. I have heard that you can “comment out” in the html code to resolve some formatting issues.

for example:

How are these different? why would I do this?

HomeMenu (with comment between links)

Home Menu (without comment between links)

Adel Ben ahmed

stupdicssdev

why the css dev don’t make it simple by adding a single line comment

comment

// comment

DAVE MAUSNER

If you want to create a single-line comment (a line which contains only a comment), AND you hate the “/* */” syntax, you can try this:

{this is a single line comment which CSS ignores}

It’s an EMPTY selector, folks. For some reason, I tolerate the braces “{ }” easier than the C-style syntax.