gabesumner · July 27, 2012 16:52
diff --git a/worst-practice.html b/worst-practice.html
 <!doctype html>
 <html>
 <head>
    <title>Sushi Mockup</title>
    <!-- Nothing wrong with this block of styling.  Collapse or keep scrolling. -->
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            background: #d3c9ba;
            font: 12px/22px Arial, Verdana, sans-serif;
            color: #555;
        }

        #PageWrapper
        {
            background: white;
            box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
            width: 1000px;
            margin: 15px auto;
            border-radius: 15px;
            overflow: hidden;
        }

        .top
        {
            background: Black;
            color: White;
            text-transform: uppercase;
            font-size: 11px;
            height: 90px;
            padding: 20px;
        }

        .top .logo
        {
            float: left;
            padding: 30px 0 0 100px;
            background: url(/styles/Images/logo.png) no-repeat;
            min-height: 60px;
        }

        .top ul.nav
        {
            margin: 0;
            padding: 35px 0;
            list-style: none;
            float: right;
            display: inline;
            overflow: hidden;
        }

        .top ul.nav li
        {
            float: left;
            display: inline;
        }

        .top ul.nav li a
        {
            font: 14px/24px Arial;
            font-weight: bold;
            padding: 0 15px;
            color: White;
        }

        .header
        {
            background: url(/styles/Images/background.jpg) no-repeat;
            height: 350px;
        }

        .special
        {
            background-color: #443c32;
            color: #a29e99;
            padding: 20px 0 0 0;
            clear: both;
            display: table;
            width: 100%;
        }

        .special .col
        {
            border-left: 1px solid #575047;
        }

        .col
        {
            float: left;
            width: 20%;
            display: block;
            margin: 0 20px 20px 0;
            padding-left: 20px;
        }

        .content
        {
            padding: 20px 0 20px 0;
            clear: both;
        }

        .content h1
        {
            font: 38px/48px Georgia;
            color: Black;
            padding: 35px 0;
            border-bottom: 1px solid #ddd;
            margin: 35px 0;
        }

        .footer
        {
            border-top: 1px solid #ddd;
            width: 94%;
            margin-left: 3%;
            padding: 20px 0;
            clear: both;
        }
    </style>

    <!-- This block of styling contains lots of examples of valid styling that creates problems in a CMS -->
    <style type="text/css">
        /*---------------------------------------------------------*/
        /* Greedy styling can impact the CMS's WYSIWYG editor - This type of styling should be scoped by styling through a surrounding <div> container - For example, #PageWrapper */
        /*---------------------------------------------------------*/
        a /* Use #PageWrapper a { } instead */
        {
            text-decoration: none;
            color: #ca3606;
        }

        p /* Use #PageWrapper p { } instead */
        {
            margin-bottom: 20px;
        }

        h1, h2, h3, h4, h5, h6 /* Use #PageWrapper h1, #PageWrapper h2, #PageWrapper h3, #PageWrapper h4, #PageWrapper h5, #PageWrapper h6  { } instead */
        {
            font-size: 100%;
            font-weight: normal;
        }

        h2, h3 /* Use #PageWrapper h2, #PageWrapper h3  { } instead */
        {
            font: 18px/28px Georgia;
            color: Black;
            padding: 15px 0;
            display: block;
        }

        h2 /* Use #PageWrapper h2  { } instead */
        {
            font: 24px/32px Georgia;
        }

        /*---------------------------------------------------------*/
        /* Class styles that need to be used directly by content authors.  Don't make content authors learn HTML and CSS.  These styles could work automatically by styling through the surrounding <div>. */
        /*---------------------------------------------------------*/
        .logo-title /* Use .logo h1 { }  instead */
        {
            font: bold 25px/25px Georgia;
        }

        .header-image /* Use .header img { } instead */
        {
            float: right;
            padding: 0;
            margin: 100px 0 0 0;
            vertical-align: top;
        }

        .special-title /* Use .special h3 { } instead */
        {
            color: White;
        }

        /* More CSS classes that get exposed to content authors through the CMS.  */
        img.sushi-image
        {
            float: left;
        }

        /* Sometimes ad-hoc style classes are necessary, but it forces content authors to learn these style classes and apply them correctly.  When possible, styling should be applied automatically by styling through a surrounding <div> */
        .button
        {
            background-color: #ca3606;
            border: 0px;
            margin-bottom: 15px;
            color: #fff;
            text-transform: uppercase;
            text-decoration: none;
            padding: 10px 30px;
            border-radius: 15px;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
 </head>
 <body>
    <div id="PageWrapper">
        <div class="top">
            <div class="logo">
                <!-- Don't embed styles directly into the HTML.  It makes it incredibly difficult to redesign the website later. -->
                <a href="/" style="color: White;">
                    <!-- Forcing content authors to learn and use CSS classes.  "logo-title" is unneeded - use .logo h1 { }  for styling. -->
                    <h1 class="logo-title">Tsuki</h1>
                    traditional sushi bar
                </a>
            </div>
            <ul class="nav">
                <li><a href="our-menu">Our Menu</a></li>
                <li><a href="location">Location</a></li>
                <li><a href="reservation">Reservation</a></li>
            </ul>
        </div>
        <div class="header">
            <!-- Forcing content authors to learn and use CSS classes.  "header-image" is unneeded - use .header img { }  for styling. -->
            <img class="header-image" src="/images/default-album/sushi_header.png?sfvrsn=0" alt="" />
        </div>
        <div class="special">
            <div class="col">
                <!-- Forcing content authors to learn and use CSS classes - "special-title".  Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
                <h3 class="special-title">The tradition</h3>
                <p>Chef's of Japanese cuisine and sushi, much like artists, use their unfilled canvas and craft works of art to indulge not only with the eyes but with the palate. This aged ritual has been rooted for centuries and is a time capsule from generation to generation of legacies from their forefathers.</p>
            </div>
            <div class="col">
                <!-- Forcing content authors to learn and use CSS classes - "special-title".  Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
                <h3 class="special-title">The chef</h3>
                <p>The master sushi chef, Shiro is probably the most famous sushi chef in Seattle. His name had appeared on almost every cuisine magazines and newspapers, and continues to do so. His sushi does indeed taste excellent and fresh, as he personally select the fish every morning at various markets.</p>
            </div>
            <div class="col">
                <!-- Forcing content authors to learn and use CSS classes - "special-title".  Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
                <h3 class="special-title">The venue</h3>
                <p>When you enter his sushi bar, the first thing you notice is that nothing really grabs your attention. No striking decoration, no ostentatious displays of grandeur, no nightclub glitz. The decor says relax, Japanese food and drink awaits you.</p>
            </div>
            <div class="col">
                <!-- Forcing content authors to learn and use CSS classes - "special-title".  Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
                <h3 class="special-title">Our goal</h3>
                <p>Our philosophy is simple, season, sublime - learning from old traditional Japanese culture. &nbsp;Our mission is to convey the essence of Japanese traditional cooking skills and knowledge to the world.</p>
            </div>
        </div>
        <div class="content">
            <!-- These image alignment issues are challenging to address. Many CMS tools have alignment options in the CMS, but this results in in-line styling.  This might be okay for many circumstances though.  Sitefinity has drag & drop layouts that could also be utilized. -->
            <img class="sushi-image" src="/images/default-album/sushi1.jpg?sfvrsn=0" alt="">
            <h2>What is sushi</h2>
            <p>Sushi is a typical Japanese food with over a thousand years of history and tradition. It has become perhaps the most visible example of Japanese cuisine in other countries.</p>
            <p>Sushi actually began as a way of preserving fish. The raw, cleaned fish was pressed between rice and salt by a heavy stone for a few weeks. After a few weeks, the stone was removed and replaced with a light cover. &nbsp;A few months after that, the fermented fish and rice were considered ready to eat. Not until the 18th century did a chef named Yohei decide to serve sushi in its present form and forget about the fermentation process altogether. The use of vinegar rice, however, probably harks back to the feremented taste of early sushi.</p>
        </div>
        <div class="footer">
            <!-- Using a <table> for layout and using lots of inline styling.  Replace with a <div> and define stylesheets. -->
            <table style="display: table;">
                <tbody>
                    <tr>
                        <td style="width: 20%; padding-left: 20px;">
                            <!-- Forces content authors to learn and use the "footer-title" CSS class.  Instead style <h3> automatically through a surrounding <div>. -->
                            <h3 class="footer-title">Hours of operation</h3>
                            The Tsuki is open Thursday's to Monday's from 6:00 p.m. to 9:00 p.m.*<br />
                        </td>
                        <td style="width: 20%; padding-left: 20px;">
                            <!-- Forces content authors to learn and use the "footer-title" CSS class.  Instead style <h3> automatically through a surrounding <div>. -->
                            <h3 class="footer-title">Dress code</h3>
                            Resort casual (no ripped jeans or exercise wear)<br />
                        </td>
                        <td style="width: 20%; padding-left: 20px;">
                            <!-- Forces content authors to learn and use the "footer-title" CSS class.  Instead style <h3> automatically through a surrounding <div>. -->
                            <h3 class="footer-title">How to eat sushi</h3>
                            If you're new to sushi, this article introduces you to proper sushi etiquette.<br />
                        </td>
                        <td style="width: 20%; padding-left: 20px;">
                            <!-- Forces content authors to learn about the "button" CSS class, which isn't ideal.  Styling automatically through a surround <div> might be preferable.  Sometimes this stuff can't be entirely avoid though - just be aware that it diminishes and complicates the content authoring experience. -->
                            <a href="reservation" class="button">Reservation</a><br />
                            <h3>+1 884 63 55</h3>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Sushi Mockup</title>
	<!-- Nothing wrong with this block of styling. Collapse or keep scrolling. -->
	<style type="text/css">
	*
	{
	margin: 0;
	padding: 0;
	}

	body
	{
	background: #d3c9ba;
	font: 12px/22px Arial, Verdana, sans-serif;
	color: #555;
	}

	#PageWrapper
	{
	background: white;
	box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
	width: 1000px;
	margin: 15px auto;
	border-radius: 15px;
	overflow: hidden;
	}

	.top
	{
	background: Black;
	color: White;
	text-transform: uppercase;
	font-size: 11px;
	height: 90px;
	padding: 20px;
	}

	.top .logo
	{
	float: left;
	padding: 30px 0 0 100px;
	background: url(/styles/Images/logo.png) no-repeat;
	min-height: 60px;
	}

	.top ul.nav
	{
	margin: 0;
	padding: 35px 0;
	list-style: none;
	float: right;
	display: inline;
	overflow: hidden;
	}

	.top ul.nav li
	{
	float: left;
	display: inline;
	}

	.top ul.nav li a
	{
	font: 14px/24px Arial;
	font-weight: bold;
	padding: 0 15px;
	color: White;
	}

	.header
	{
	background: url(/styles/Images/background.jpg) no-repeat;
	height: 350px;
	}

	.special
	{
	background-color: #443c32;
	color: #a29e99;
	padding: 20px 0 0 0;
	clear: both;
	display: table;
	width: 100%;
	}

	.special .col
	{
	border-left: 1px solid #575047;
	}

	.col
	{
	float: left;
	width: 20%;
	display: block;
	margin: 0 20px 20px 0;
	padding-left: 20px;
	}

	.content
	{
	padding: 20px 0 20px 0;
	clear: both;
	}

	.content h1
	{
	font: 38px/48px Georgia;
	color: Black;
	padding: 35px 0;
	border-bottom: 1px solid #ddd;
	margin: 35px 0;
	}

	.footer
	{
	border-top: 1px solid #ddd;
	width: 94%;
	margin-left: 3%;
	padding: 20px 0;
	clear: both;
	}
	</style>

	<!-- This block of styling contains lots of examples of valid styling that creates problems in a CMS -->
	<style type="text/css">
	/---------------------------------------------------------/
	/* Greedy styling can impact the CMS's WYSIWYG editor - This type of styling should be scoped by styling through a surrounding <div> container - For example, #PageWrapper */
	/---------------------------------------------------------/
	a /* Use #PageWrapper a { } instead */
	{
	text-decoration: none;
	color: #ca3606;
	}

	p /* Use #PageWrapper p { } instead */
	{
	margin-bottom: 20px;
	}

	h1, h2, h3, h4, h5, h6 /* Use #PageWrapper h1, #PageWrapper h2, #PageWrapper h3, #PageWrapper h4, #PageWrapper h5, #PageWrapper h6 { } instead */
	{
	font-size: 100%;
	font-weight: normal;
	}

	h2, h3 /* Use #PageWrapper h2, #PageWrapper h3 { } instead */
	{
	font: 18px/28px Georgia;
	color: Black;
	padding: 15px 0;
	display: block;
	}

	h2 /* Use #PageWrapper h2 { } instead */
	{
	font: 24px/32px Georgia;
	}

	/---------------------------------------------------------/
	/* Class styles that need to be used directly by content authors. Don't make content authors learn HTML and CSS. These styles could work automatically by styling through the surrounding <div>. */
	/---------------------------------------------------------/
	.logo-title /* Use .logo h1 { } instead */
	{
	font: bold 25px/25px Georgia;
	}

	.header-image /* Use .header img { } instead */
	{
	float: right;
	padding: 0;
	margin: 100px 0 0 0;
	vertical-align: top;
	}

	.special-title /* Use .special h3 { } instead */
	{
	color: White;
	}

	/* More CSS classes that get exposed to content authors through the CMS. */
	img.sushi-image
	{
	float: left;
	}

	/* Sometimes ad-hoc style classes are necessary, but it forces content authors to learn these style classes and apply them correctly. When possible, styling should be applied automatically by styling through a surrounding <div> */
	.button
	{
	background-color: #ca3606;
	border: 0px;
	margin-bottom: 15px;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 30px;
	border-radius: 15px;
	font-weight: bold;
	margin-top: 20px;
	}
	</style>
	</head>
	<body>
	<div id="PageWrapper">
	<div class="top">
	<div class="logo">
	<!-- Don't embed styles directly into the HTML. It makes it incredibly difficult to redesign the website later. -->
	<a href="/" style="color: White;">
	<!-- Forcing content authors to learn and use CSS classes. "logo-title" is unneeded - use .logo h1 { } for styling. -->
	<h1 class="logo-title">Tsuki</h1>
	traditional sushi bar
	</a>
	</div>
	<ul class="nav">
	<li><a href="our-menu">Our Menu</a></li>
	<li><a href="location">Location</a></li>
	<li><a href="reservation">Reservation</a></li>
	</ul>
	</div>
	<div class="header">
	<!-- Forcing content authors to learn and use CSS classes. "header-image" is unneeded - use .header img { } for styling. -->
	<img class="header-image" src="/images/default-album/sushi_header.png?sfvrsn=0" alt="" />
	</div>
	<div class="special">
	<div class="col">
	<!-- Forcing content authors to learn and use CSS classes - "special-title". Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
	<h3 class="special-title">The tradition</h3>
	<p>Chef's of Japanese cuisine and sushi, much like artists, use their unfilled canvas and craft works of art to indulge not only with the eyes but with the palate. This aged ritual has been rooted for centuries and is a time capsule from generation to generation of legacies from their forefathers.</p>
	</div>
	<div class="col">
	<!-- Forcing content authors to learn and use CSS classes - "special-title". Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
	<h3 class="special-title">The chef</h3>
	<p>The master sushi chef, Shiro is probably the most famous sushi chef in Seattle. His name had appeared on almost every cuisine magazines and newspapers, and continues to do so. His sushi does indeed taste excellent and fresh, as he personally select the fish every morning at various markets.</p>
	</div>
	<div class="col">
	<!-- Forcing content authors to learn and use CSS classes - "special-title". Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
	<h3 class="special-title">The venue</h3>
	<p>When you enter his sushi bar, the first thing you notice is that nothing really grabs your attention. No striking decoration, no ostentatious displays of grandeur, no nightclub glitz. The decor says relax, Japanese food and drink awaits you.</p>
	</div>
	<div class="col">
	<!-- Forcing content authors to learn and use CSS classes - "special-title". Instead style <h3> automatically through the surrounding <div> - .special h3 { } -->
	<h3 class="special-title">Our goal</h3>
	<p>Our philosophy is simple, season, sublime - learning from old traditional Japanese culture.  Our mission is to convey the essence of Japanese traditional cooking skills and knowledge to the world.</p>
	</div>
	</div>
	<div class="content">
	<!-- These image alignment issues are challenging to address. Many CMS tools have alignment options in the CMS, but this results in in-line styling. This might be okay for many circumstances though. Sitefinity has drag & drop layouts that could also be utilized. -->
	<img class="sushi-image" src="/images/default-album/sushi1.jpg?sfvrsn=0" alt="">
	<h2>What is sushi</h2>
	<p>Sushi is a typical Japanese food with over a thousand years of history and tradition. It has become perhaps the most visible example of Japanese cuisine in other countries.</p>
	<p>Sushi actually began as a way of preserving fish. The raw, cleaned fish was pressed between rice and salt by a heavy stone for a few weeks. After a few weeks, the stone was removed and replaced with a light cover.  A few months after that, the fermented fish and rice were considered ready to eat. Not until the 18th century did a chef named Yohei decide to serve sushi in its present form and forget about the fermentation process altogether. The use of vinegar rice, however, probably harks back to the feremented taste of early sushi.</p>
	</div>
	<div class="footer">
	<!-- Using a <table> for layout and using lots of inline styling. Replace with a <div> and define stylesheets. -->
	<table style="display: table;">
	<tbody>
	<tr>
	<td style="width: 20%; padding-left: 20px;">
	<!-- Forces content authors to learn and use the "footer-title" CSS class. Instead style <h3> automatically through a surrounding <div>. -->
	<h3 class="footer-title">Hours of operation</h3>
	The Tsuki is open Thursday's to Monday's from 6:00 p.m. to 9:00 p.m.*<br />
	</td>
	<td style="width: 20%; padding-left: 20px;">
	<!-- Forces content authors to learn and use the "footer-title" CSS class. Instead style <h3> automatically through a surrounding <div>. -->
	<h3 class="footer-title">Dress code</h3>
	Resort casual (no ripped jeans or exercise wear)<br />
	</td>
	<td style="width: 20%; padding-left: 20px;">
	<!-- Forces content authors to learn and use the "footer-title" CSS class. Instead style <h3> automatically through a surrounding <div>. -->
	<h3 class="footer-title">How to eat sushi</h3>
	If you're new to sushi, this article introduces you to proper sushi etiquette.<br />
	</td>
	<td style="width: 20%; padding-left: 20px;">
	<!-- Forces content authors to learn about the "button" CSS class, which isn't ideal. Styling automatically through a surround <div> might be preferable. Sometimes this stuff can't be entirely avoid though - just be aware that it diminishes and complicates the content authoring experience. -->
	<a href="reservation" class="button">Reservation</a><br />
	<h3>+1 884 63 55</h3>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</body>
	</html>