CSS - How to Remove Comments and Make CSS One Line

CSS - How to remove comments and make CSS one line

http://developer.yahoo.com/yui/compressor/

single line comments on external css file

Single line comments in CSS are single line comments:

/* single line comments */

There's no other way.

But you still can use a pseudo vendor prefix to comment properties:

.sample {
    -commented-color: red;
}

Remove comments from css file

Change .* to .*?.

echo preg_replace('#/\*.*?\*/#s', '', $original);

This will only remove /* up to the closest */ rather than the furthest.

Remove LESS // comments on compile

Less' single-line comments // are supposed to be silent, as per documentation states:

Single-line comments are also valid in LESS, but they are ‘silent’, they don’t show up in the compiled CSS output:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

See at LESS' website: http://lesscss.org/#-comments

-x flag works on command line to output minified CSS (which will strip CSS comments), but in any way, double slash shouldn't appear on css. See http://lesscss.org/#usage at 'Command-line usage' topic.

Which output styles remove multiline line comments?

:compressed is the only output style which will remove multi-line (/* ... */) comments from the final rendered CSS.

Additionally, :compact will turn a multi-line comment into a single line in the final CSS. With :nested and :expanded, all multi-line comments and their line breaks are rendered in the final CSS.

For example, this SCSS:

// SL Comment

/* ML Comment1
   Whoop. */

//! SL w/ bang

/*! ML Comment2
    Whoop. */

will become the following CSS for each different output style:

Nested:

/* ML Comment1
   Whoop. */
/* ML Comment2  
    Whoop. */

Expanded:

/* ML Comment1
   Whoop. */
/* ML Comment2
    Whoop. */

Compact:

/* ML Comment1 Whoop. */
/* ML Comment2 
    Whoop. */

Compressed:

/* ML Comment2
    Whoop. */

Beginning a comment with ! only affects multi-line comments in :compressed mode, where they will be preserved when they would otherwise be removed from the final CSS.

Is it bad practice to prefix single lines of CSS with // as a personal comment style?

I see that there were/are lots of people complaining about this and since this is an older question, there is probably a lot of people reading it wondering if it is still true, or if there is actually a standard in the first place. Allow me to clear the air. The following are the core reasons for the strict CSS comment policy:

#1 It is not standard

Standardized at least since CSS 2.1, comments are to ONLY be encased in /* and */. While some browsers tolerate //, they aren't supposed to, and are only one inch from someone saying "oh yeah that's non-standard" or "hey! That's non-standard, fix it!"; and then guess what, your CSS code, which WAS working, now doesn't for thousands of people (and may have already not been working for hundreds of others). I will add that <!-- and --> are allowed but only (and I mean ONLY) when they appear within an HTML document, not in a .css source file. If your browser is so old that it can't skip over <style> tags, it's probably time for a new browser 10 years ago. Even Lynx and other text browsers know not to read them, so commenting it out is only useful in very isolated situation where hardware and software are landlocked in their current working state.

#2 It is not (very) cross-platform friendly

The single line comment, which starts anywhere on a line with //, is terminated by 'newline' which is/are not a cross-platform standardized character(s). Worse, some might have one character for a newline, or 2... and when these platforms mix together, a newline could be lost, and there goes your terminator...and some or all of your code is now being commented out that was not supposed to be, you don't have to be a genius to know what the consequences of that might be, especially if you control features of your site solely through CSS which many do.

#3 The Standard IS Friendly and Uniform to All

The /* and */ delimiters are ALWAYS going to be the same characters on EVERY computer regardless of architecture, operating system, etc.

#4 Newlines are Whitespaces

The last reason (yes, there is one more), newline character(s) are considered (in CSS and many other languages) to be whitespace, and */ is not whitespace is it? And if you think about it at this point, it should be pretty clear you should NOT be using a whitespace to terminate a comment especially since whitespace is and can be stripped by many HTML/CSS parsers, or reformatted without you even knowing about it.

#5 CSS != C/C++

Now if you are about to fly out of your seat and yell at me about "Hey, but C++...", remember those compilers and IDEs have tons of newline checking and detection built into them so they can take it. Most compilers do not reformat your code unless asked, and many IDEs will usually ask you what kind of newlines your document is using if it can't guess on its own. If we did this with CSS pages for the end user every time one was loaded, imagine the nightmare it would be trying to get around. Furthermore, C/C++ code is not parsed at run-time and is compiled, so then much of the time, the user never gets the document in question in the first place. The source files are not being constantly viewed by the entire world on hundreds of platforms and many operating systems, and a million different browsers either. The comments are stripped out before they ever get to the end user. CSS source comes right to the user's browser and has to be very resilient not knowing what is on the other side, so the caveat is that it must be ready for anything the end user has or does, not anything the developer does or has!

#6 It's inconvenient

No, it is very annoying having to type that extra */, but the blame for this mainly goes to developers of CSS editing software who don't offer auto completion. If you use a specialized editor that can do that, preferably out of the box, then you'll find it is just as easy as using //. Get in the habit of typing /**/ and then backspace 2, it will help you to not forget and makes it a little easier. Better still, you can set up a hot key to just lay down those for you. Windows and Linux both have powerful tools to allow this (KDE is very good for that).

---

I hope this helps everyone understand the "why" behind the "how", and remember just because something works for you, doesn't mean it is the standard, and to sum up:

YES, IT IS BAD PRACTICE to use it, just say NO to the double slash!!!
If you need a visual aid to remind you of this important fact, just burn this image into your mind (thanks to those of you who have nothing better to do but make pictures like this):

---

PS: If you really want something to complain to the ones making/breaking CSS standards (W3C, elbow), someone starts a discussion about how unnecessarily long and wrong the "!important" keyword is! But that is not part of this question so I won't go into it.

References

• W3C: CSS 2.1 working draft: comment characters.
• W3C: CSS syntax module level 3: railroad diagrams of parser-to-character interpretations.
• Stack Overflow: Various Stack Overflow articles with practically the same subject as this one.
• w3schools: CSS 3 syntax standard (which in turn references W3C).
• sitepoint: CSS syntax annotation on "not using double-slash".
• mozilla|mdn: relaxed CSS 3 processing allows double slash in input files.

sed command to strip CSS comments not working

This task is doable with regexes. However, if you use a line-oriented tool, then it becomes unnecessarily difficult to do. This task is yelling at me, like accidental complexity!

I wouldn't push this any further. Here is an npm module for this so you can add it to your builds. Here is an online css minifier so you can use it ad-hoc.

I don't know what kind of site you're building. However, a css preprocessor might simplify your work anyway. Here is a good overview.

Regular expression to find and remove comments in CSS

If you're running the match in C#, have you tried RegexOptions?

Match m = Regex.Match(word, pattern, RegexOptions.Multiline);

"Multiline mode. Changes the meaning of ^ and $ so they match at the beginning and end, respectively, of any line, and not just the beginning and end of the entire string."

Also see Strip out C Style Multi-line Comments

EDIT:

OK..looks like an issue w/ the regex. Here is a working example using the regex pattern from http://ostermiller.org/findcomment.html. This guy does a good job deriving the regex, and demonstrating the pitfalls and deficiencies of various approaches. Note: RegexOptions.Multiline/RegexOptions.Singleline does not appear to affect the result.

string input = @"this is some stuff right here
    /* blah blah blah 
    blah blah blah 
    blah blah blah */ and this is more stuff /* blah */
    right here.";

string pattern = @"(/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/)";
string output = Regex.Replace(input, pattern, string.Empty, RegexOptions.Singleline);

preg_replace out CSS comments?

Here's a solution:

$regex = array(
"`^([\t\s]+)`ism"=>'',
"`^\/\*(.+?)\*\/`ism"=>"",
"`([\n\A;]+)\/\*(.+?)\*\/`ism"=>"$1",
"`([\n\A;\s]+)//(.+?)[\n\r]`ism"=>"$1\n",
"`(^[\r\n]*|[\r\n]+)[\s\t]*[\r\n]+`ism"=>"\n"
);
$buffer = preg_replace(array_keys($regex),$regex,$buffer);

Taken from the Script/Stylesheet Pre-Processor in Samstyle PHP Framework

See: http://code.google.com/p/samstyle-php-framework/source/browse/trunk/sp.php

csstest.php:

<?php

$buffer = file_get_contents('test.css');

$regex = array(
"`^([\t\s]+)`ism"=>'',
"`^\/\*(.+?)\*\/`ism"=>"",
"`([\n\A;]+)\/\*(.+?)\*\/`ism"=>"$1",
"`([\n\A;\s]+)//(.+?)[\n\r]`ism"=>"$1\n",
"`(^[\r\n]*|[\r\n]+)[\s\t]*[\r\n]+`ism"=>"\n"
);
$buffer = preg_replace(array_keys($regex),$regex,$buffer);
echo $buffer;

?>

test.css:

/* testing to remove this */
.test{}

Output of csstest.php:

.test{}

---

Related Topics