Is max CSS the right way to go?

I was reading this article from Dan Eden (@_dte) about his idea on “Max CSS”.

http://daneden.me/2012/07/max-css-in-depth/

He states that if we start using style.max.css as our default style and then style.min.css for our minified styles, then new web designers can easily change the min to max to see our full commented version. Sounds good right? While I agree that we need to make it easy for new and aspiring Designer/Developers I do believe a solution is already implemented in the web platform today.

It is already a widely accepted approach with javascript files to just have script.js and then script.min.js. You can see examples of this around nearly every site. Check out the download for jQuery as an example

Developer (unminified)
http://code.jquery.com/jquery-1.7.2.js

Production (minified)
http://code.jquery.com/jquery-1.7.2.min.js

This is a great solution as not only do we get to see our learning / hackable file we are also saving a few bytes in the process (these all add up trust me).

An example that was shown to me is the CSS over at Github (http://goo.gl/KWfDR). If you take a look at the file name you can see that this is a bundle of lots of different css files. In this case it would make sense that there isn’t an unminified version as this will be generated in a build process. This doesn’t mean that we cant improve on it though, and again there is already a solution for minifying things but being able to see the originals.

Take a look at the second example from Facebook (http://goo.gl/TSnHa). This again looks like a script that was built but there is just 1 comment line at the top that includes two numbers (or one really big one). This may just be the 2 original files that went into creating this file?

One solution to all of this is source mapping which was recently introduced in Chrome. It allows build/compile scripts to leave a note in the resulting file that tells the IDE what files made up the document. Using this would mean it doesn’t matter if we have a .max file or not. Source mapping would need to be bought over for CSS but you get the picture.

Read the great Introduction to Javascript Source Maps by Ryan Seddon.

 Final thoughts

I agree with just about everything Dan says expect for the min / max part as he makes a great argument and covers most of the concerns raised by everyone.

I do believe that if we have to ask everyone to change their default behaviour then things like this will never take off though. Just sticking with removing the .min to get the full version is the way it has always been? Although this is only my opinion I am open to see what other people think of this.

It would be great to see CSS Source mapping in Chrome and other browsers as then anyone looking to learn from your code can then go straight to the good stuff. This would also mean we don’t have to sorry what a file is called.

  • http://www.facebook.com/scottrippey Scott Rippey

     I totally agree. The de-facto standard is to add “.min” to the files.
    I have a rule in Fiddler that removes the “.min” from URL requests … so when I’m debugging someone else’s source, I can just flip a switch and see the “pretty” code instantly! 

  • http://www.facebook.com/scottrippey Scott Rippey

     Oh, also, when I have script-generated files (eg. combined JS, compiled LESS), I always generate twice: once uncompressed, then again compressed.  But I’ve never heard of “source maps” before, that sounds like a good idea too!

    • http://twitter.com/AaronLayton Aaron Layton

      I always leave my full commented files on the server, but when I generate I always create a script.min.js and a styles.min.css