CODEWITHSUNDEEP
css
Darren
Darren

Reputation: 13128

Commented out line cancels all proceeding styles in css file

This is a weird question, but what is the reasoning behind it? Take this block of CSS for example:

.test {
    background: #cccccc;
    width: 200px;
    height: 200px;
    display: block;
} // wot

.derp {color:#FF0000;}

This will not apply the .derp styling to the document - JSFiddle Example

Now why would this be happening? I've read the Docs in relation to comments which state "you should use" /*comment here*/ for single and multi-line comments, but why would we be able to comment out other stuff in css then? (Within {}) Like so:

.class {
    //background: #FF0000;
}

Just for completeness' sake, here's a JSFiddle Example of the CSS being applied when the comment is removed.

I'm asking this is because I just did something like this and it didn't throw any errors in the console or anything like that so I was just wondering what causes this and is it general practice as such?

Upvotes: 3

Views: 58

Answers (2)

Dongwan Kang
Dongwan Kang

Reputation: 1

This is the best explanation.

.test {
    background: #cccccc;
    width: 200px;
    height: 200px;
    display: block;
}

//wot .derp {color:#ff0000;} 

 .derp {color:#00ff00;}

//wot .derp {color:#0000ff;}

Upvotes: 0

Dave Anderson
Dave Anderson

Reputation: 12304

The comment is taken to be everything until the next closing } which is your .derp style. Subsequent styles would be applied. You can see the effect of these comments;

.test {
    background: #cccccc;
    width: 200px;
    height: 200px;
    display: block;
} //wot

.derp {color:#FF0000;} 

.derp {color:#00FF00;} //wot

.derp {color:#0000FF;}

Here the red style and final blue style are ignored and green is applied; https://jsfiddle.net/44z18dfa/9/

Upvotes: 4

Related Questions