Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Before deployment, is there tool to compress HTML class attribute and CSS selectors?

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?

like image 860
steveyang Avatar asked Nov 09 '11 15:11

steveyang


People also ask

What is the CSS class selector used for?

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.

What are advanced selectors?

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.


1 Answers

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.

like image 55
Litek Avatar answered Nov 04 '22 18:11

Litek