Question

I’m working on some refactoring of legacy code to move styles to a stylesheet file from the html. Our build process runs the stylesheet css files through the YUI compresser minifier. Which in its efficiency strips out empty .selector { } styles see – YuiDoc’s No empty declarations section.

The issue arises when in some places the code finds and modifies stylesheet rules, but it can’t find the rules that have been minified/stripped. Is there a noop rule they would not effect any rendering but would keep the effectively empty rule in the stylesheet?

Answer 1

According to W3C CSS2 Specification

In CSS, identifiers may begin with ‘-‘ (dash) or ‘_’ (underscore).
Keywords and property names beginning with -‘ or ‘_’ are reserved for
vendor-specific extensions

So you could create your own property say for example -custom-noop: noop; without the validator complaining too much. You might however have some problems with older browsers ignoring other rules in a block if you use this.

Edit:
You might also have some luck with this syntax:

.someclass{
    /*! Keep Me */
}

Comments like this are kept in after compressing so it might work for keeping the block the comment is inside. Note that after compression the ! is stripped so you will need to add it back each time you compress it.