DaveMaxwell:
Just a comment. I know this is just an example, but I personally wouldn’t do it this way for this example because you’re only truly making savings if the css is defined inline like this (if it’s in a separate file, the file is cached), and the html ends up being longer. I would do it a slightly different way which still reduces the css, and reduces the html (which most likely will be repeated, and this have a bigger impact if the html isn’t optimized.
The original example body html is 202 bytes. This second version is 178. This version is actually one byte smaller (202 + 148 = 350, 178 - 171 = 349).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="EN">
<head>
<title>Just Testing</title>
<style type="text/css">
body {background-color:#f00}
/* 246 bytes */
.header {width:98%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
.content {width:88%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
.footer {width:42%; min-height:8.8em; margin:0 auto 2em; background-color:#fff}
/* 171 bytes */
.header, .content, .footer { min-height:8.8em; margin:0 auto 2em; background-color:#fff}
.header {width:98%;}
.content {width:88%;}
.footer {width:42%;}
</style>
</head>
<body>
<div class='header'>
Header
</div>
<div class='content'>
Content
</div>
<div class='footer'>
Footer
</div>
</body>
</html>
Hi Dave,
It was not a good example only knocked up to show how TLAs are effective if used to reduce a linked style-sheet.css.
Post #10
I developed a site and the style-sheet rapidly became like spaghetti so decided to reduce the repetition. My approach was similar to Database Normalization which only uses unique elements.
An online program similar to “http://www.wordcounter.net/ ” was used to count all duplicates.
Next task was to remove duplicates and replace with a single TLA (Three Letter Acronym).
Each change was validated and eventually the style-sheet shrank to less than 4k and still handled ten different pages styles.
A bonus was the colour scheme was reduced to about five colours easily changed.
Introducing Responsive Design has increased the style-sheet to 6k and just over 100 lines.
Like Ralph I prefer using a single line and endeavour to list the elements alphabetically.