-1

Many people today use Google Closure Compiler to actually "compile" their JavaScript code. The advanced mode enables it to rewrite JS to better, faster and smaller JS-code that functions the same way as the original input.

Are there any good compilers out there for HTML/CSS? It could for example compress the CSS classes like a JS-compresser does. It could remove any divs (display: none;) that no JavaScript actually displays (display: block;). It could remove whitespaces. It could combine small images into sprites. It could combine files that are included on all pages into one file.

The list just goes on and on. Do you know about any good tools for this job? (Even if it only can compress CSS classes etc.)

Student of Hogwarts
  • 1,108
  • 3
  • 14
  • 28
  • "actually compile" : no. Only make it faster and smaller. – Denys Séguret Oct 21 '12 at 09:28
  • @dystroy: I actually considered writing actually "compile". xD – Student of Hogwarts Oct 21 '12 at 09:29
  • 1
    You can't really ask it to prove that specific DIVs are never used by Javascript or that specific classes are unused (Javascript could be using class information to make specific functionality happen). – DCoder Oct 21 '12 at 09:29
  • possible duplicate of http://stackoverflow.com/questions/787789/any-recommendations-for-a-css-minifier – Luca Oct 21 '12 at 09:29
  • @DCoder I see that it would be hard to implement this functionality, but it is possible to do. I'm looking for a compiler that does a good job. Anyone could do {% spaceless %} in a Twig-template.. – Student of Hogwarts Oct 21 '12 at 09:30
  • @Luca That's just a minifier.. – Student of Hogwarts Oct 21 '12 at 09:33
  • Note that the specific tools to use depend a little of the other tools you use for building your application. Are you using a building system ? Are you fine with scripts ? – Denys Séguret Oct 21 '12 at 09:39
  • @StudentofHogwarts html / css do not "compile" - my understanding is that what you're after is some advanced for of minifier + compressor? – Luca Oct 21 '12 at 09:44

2 Answers2

4

Concatenate your css files and you made most of the work : the cost is mostly related to the number of requests.

But for removing useless rules, there is no point in using a tool : needing one would mean you don't really understand which ones are needed and why. In other words your code is a mess you must fix because at this point it may only grow explosively.

That's the same for sprites and other optimizations : only by knowing the use flow of the application, if people come back and have some images cached, or only the ones of the main page, etc. can you know what strategy to use, even if it's almost always useful to merge all your small images of one page in a big one.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • About your last paragraph. I agree, you should know it if it's a small project. But if 3 people are coorporating on a big project, things start to grow a little bit, and manually checking if all the classes is used can be very tedious.. – Student of Hogwarts Oct 21 '12 at 09:35
  • 1
    Yes, but there is no alternative. As soon as you don't maintain the sanity of CSS, you're doomed and you'll have to rebuild it again. A solution in a multi-user context is to use many small files with clear purposes and merge them at build time. – Denys Séguret Oct 21 '12 at 09:37
  • Ok, I'll keep this in mind. At the time I'm just outlining the basic structure and body of the web project. So I'm doing a bit of research as to how to optimize the site and be code in a way that will enable optimizations later on, without any surprises.. – Student of Hogwarts Oct 21 '12 at 10:05
0

No actual compilers as such that I know of, but there are tools to help you create clean html and css.

For css there is, for example, less which is a good tool for generating nice clean cross-browser markup but you have to use it from the get-go. Similarly for html, there are a few markup frameworks that can simplify generation of clean html. markdown is one such that is quite popular.

Steve Atkinson
  • 1,219
  • 2
  • 12
  • 30
  • 1
    actually, CSS output from preprocessors like less and sass is generally more verbose than hand-coded css: http://lea.verou.me/2011/03/on-css-preprocessors/ – Luca Oct 21 '12 at 10:31
  • @luca yes, but isn't it faster? – Student of Hogwarts Oct 21 '12 at 10:48
  • what do you mean with 'faster'? if you are talking about download time, it depends on the file size and a more verbose file would lose here. If you are talking about browser performance, this depends on your selectors, how you optimize them. If you are talking about development time, then yes, this is where less and sass help out a lot. – Luca Oct 21 '12 at 10:53