本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第2章，第2.2节,作者： 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。
对于这个网站，我们会用“移动置后”的方案来编写，但我们会在移动版和桌面版上使用相同的标记。我们将专注于语义标记，因为网站需要在移动设备上工作，所以我们还得考虑DOM和CSS的性能。
注: “移动置后”的缺点之一是移动设备需要下载和解析所有的桌面样式。如果采用“移动优先”，那么移动设备可以安全地忽略那些不需要的样式。另外，这是一个需要逐一分析的问题。为一个文档创建标记时，我把它分成区域，这样不仅有合理的语义，而且在设计和添加样式时也很方便。对于加州鸟类站点，我把导航链接放置于一个
标签内，再插入一个标签，来表示桌面版的侧边栏或移动版的顶部导航栏。对于内容，我创建了一个class为main的标签，其中包含了照片、标题和内容的拷贝。标记文档如代码清单2.1所示。
代码清单2.1 页面body部分的标记 <body class="bd"> <header class="container header"> <h1>Birds of California!</h1> </header> <aside class="sidebar"> <nav class="bird-nav"> <ul class="bird-list"> <!-- Redundant Class for performance --> <li class="nav-li"> <a class="nav-link" → href="/california-condor">California Condor</a> </li> <li class="nav-li"><a class="nav-link" → href="/california-quail">California Quail</a></li> <li class="nav-li"><a class="nav-link" → href="/california-gull">California Gull</a></li> </ul> </nav> </aside> <div class="container main"> <h2>California Gull</h2> <div class="hero-shot"> <a href="http://www.flickr.com/photos/catlantis/5514922015/"> <img class="hero-img" src="http://farm6.staticflickr.com/ → 5171/5514922015_bfeab78ce0_z.jpg"> </a> <p class="caption">Photo By <a href="http://www.flickr.com/photos/ → catlantis/5514922015/">C.L. Maclay</a></p> </div> <section class="content"> <p>Lorem ipsum dolor...</p> </section> </div> <footer class="container ft"> <ul class="foot-links"> <li><a href="/copyright">© 2012 Awesome Bird Foundation, → All Rights Reserved</a></li> <li><a href="/tos">Terms of Service</a></li> </ul> </footer> </body>你会发现，有不少看似多余的class。例如，导航链接
标签有“nav-li”的class。这有两个原因：
当代码量变大时，class会更容易管理。使用nav-li比使用选择器“nav ul li”更简洁、更干脆、更容易进一步开发。由于网站要能在世界上最慢的免费的Android手机上运行，当涉及CSS选择器的性能时，我们需要非常挑剔，也就是说要避免使用后代选择器。一个直接的反面例子，浏览器解析CSS选择器是从右往左的。这意味着，如果它看到一个如“nav ul li a”的规则时，它首先必须获得所有匹配a的元素列表，然后检查看它是不是li的后代，再按相同规则继续检查。后代选择器虽然看起来方便，但它的性能开销是最大的。
相关资源：敏捷开发V1.0.pptx