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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With