In current project, I was asked for compressing the HTML class attribute and corresponding CSS selectors before deployment. For example, the code on production is:
<div class="foo"> <div id="bar"></div> </div> .foo {/*Style goes here*/} #bar {/*Style goes here*/}
On deployment, I want the HTML class and corresponding CSS selectors to be substituted:
<div class="a"> <div id="b"></div> </div> .a {/*Style goes here*/} #b {/*Style goes here*/}
What's the available tools there to archive this compression?
Definition and Usage class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
Advanced selectors refer to CSS selectors that do something more complex than selecting a tag, class, or ID. This includes selecting a type of tag within another tag, or selecting an element with a certain ID or class, but only when the mouse is hovering over it.
If you really want to rename class names (keeping in mind what Madmartigan said) Google Closure Stylesheets does that. It's an overkill, and YUI Compressor or any other minification + gzipping tool should give you enough performance boost, but it can do it. You'll have to use other Closure tools to make appropriate changes to your .js
files and html templates.
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