How to Reduce HTML Size Yet Still Use Long Style Names Using ColdFusion

Here's a suggestion for dealing with styles donated by Steve Runyon.

Long style names, like "tabCellSelected" or "tabCellUnselected", cause HTML page sizes to grow. For example, if you have a table with 8 columns and 20 rows, with 1 column selected, you're expending 2680 bytes on the names of the styles. ((7 * 20 * 17) + (1 * 20 * 15) = 2680)

The page size can be reduced by creating (application?) variables named like the style, whose values are short placeholders:

<cfset application.TabCellSelected_sty = "s001">
<cfset application.TabCellUnselected_sty = "s002">

Your style definitions then look like this:

TD.#application.TabCellSelected_sty# {
TD.#application.TabCellUnselected_sty# {

And your generated html looks like this:

<td class=s001>data</td>
<td class=s002>data</td>

On that same 8x20 table, you're now using only 640 bytes for the styles. (8 * 20 * 4)