Is minifying your HTML, CSS, and Javascript a bad idea?

JohnCand picture JohnCand · Apr 25, 2014 · Viewed 11.2k times · Source

Wikipedia defines minification as...

[...] the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

I'm currently doing this to my HTML, CSS and Javascript in order to save bandwidth, but someone told me that he remembers a browser misbehaving when there's no white space between certain tags (namely ul and li items). Is this true?

Are there any notable browsers, proxies, or other user agents that misbehave when dealing with minified code?

Other than losing readability when viewing the source, is there any other downside to minification?

Answer

xec picture xec · Apr 25, 2014

someone told me that he remembers a browser misbehaving when there's no white space between certain tags (namely ul and li items). Is this true?

Yes, in certain circumstances, like if the elements are set to display inline-block or inline.

The following two lists will render differently, because of the whitespace between the <li> elements:

html

<ul>
    <li>simple</li>
    <li>list</li>
</ul>

<ul><li>minified</li><li>list</li></ul>

css

li {
    display: inline-block;
    background: blue;
    color: white;
}

rendered output

enter image description here

http://jsfiddle.net/Uwv3e/