HTML/CSS结构，提供未来的设计更改和蒙皮

我目前的项目需要构建一个组件框架，这些组件将来将在单独品牌的网站上重复使用。这些组件汇总到ASP.NET用户控件中（

*.ascx

）。相同的组件将出现在多个品牌网站上，它们之间的唯一区别是内容和CSS。我需要以这样一种方式来构造HTML，以便仅通过CSS为设计调整提供尽可能多的未来灵活性。这里有一个例子

假设我正在创建一个基本详图索引组件来提升某些内容。这对于语义和简单的HTML就足够了：

<div class="callout">
  <h3>Headline</h3>
  <p>lorem ipsum...</p>
  <a href="#">Read more</a
</div>

大字标题
同侧眼线

---

天哪，蝙蝠侠！但是真的。。。第二种结构将为设计更改提供大量未来CSS蒙皮灵活性，但在语义上是垃圾

我的问题是:

• 样板上是否有任何框架已经有了这样的结构（我认为Twitter引导不会提供这么大的灵活性）
• 这完全是个糟糕的主意吗？（主观的，我知道）

---

这不是一个糟糕的主意-这是一个好主意，很多人最终都会使用类似的HTML：

我最初的想法是使用样式设计你的网站，这迫使你考虑你给出的第二个例子，因为需要动画或结构来支持基于CSS文件重新蒙皮的概念

然而，我会仔细考虑DIV的命名约定，外部和内部实际上都非常合理：）

• jQueryUI网站还为设计师提供了一种很好的方式来改变网站的外观和感觉，而无需自己制作CSS（并且在以后仍然可以使用CSS）

---

“第二种结构将为未来的CSS蒙皮设计更改提供大量的灵活性，但在语义上是垃圾”。一点也不。在HTML5中，

s没有任何意义，因此它们是用于推测样式挂钩的完美元素。任何试图从语义上解释页面的行为都将忽略它们。我唯一想说的是，作为

，您的根元素可能更好，而作为

，您的

可能更好。

<div class="callout-outer">
  <div class="callout-inner">
    <div class="callout-top">
      <h3>Headline</h3>
    </div>
    <div class="callout-body">
      <p>lorem ipsum...</p>
    </div>
    <div class="callout-bottom">
      <a href="#">Read more</a>
    </div>
  </div>
</div>