html - 使用一致的 CSS 和 HTML 创建 HTML 模块

Question

这是一个直播 example

我正在尝试创建标记和 CSS 永远不会改变的模块(例如，我可以在实用程序、页脚、页眉等部分中使用相同的模块)，但我仍然希望自由增加/减少模块的大小。

理想情况下，我的 CSS 应该是这样的:

article {
    base styles
}
article.sample1 {
    custom styles
}
article.sample2 {
    custom styles
}

我可以用这段代码调整 article.login 模块的大小:

section.utilities > article

或

section.test > article

1. 文章元素(或替代项)。我正在使用文章元素。有更好的吗？我在管间四处寻找自定义元素( A List Apart 、 The Worm Hole 和 Ajaxian )。我应该坚持使用文章、使用不同的文章还是制作自定义文章？

2. IE。我无法在 IE 中对此进行测试。我想我的基地覆盖了 inline-block和 background-size , 但我不确定 child selectors .您看到支持此代码的任何问题吗？

3. 最后，这种方法是 Bad Idea™ 吗？最终，这将允许我在 PHP 文件中构建模块/对象，我希望这将导致快速开发和轻松的代码管理。

更新

我想创建一个自定义元素(模块)，但发现这不切实际。 data attribute的组合和 CSS attribute selectors ，为我提供将这些视为自定义元素的工具。

<article data-module="helloWorld" />

所有模块都可以被引用

article[data-module] { ... }

Answer 1

我的 .02:

1. 从历史上看，定义自定义元素一直是不受欢迎的，从语义上讲，人们应该选择最接近预期目标的元素。这让位于 div 和 span 的大量使用。我个人的看法是，article 标签的引入是一种妥协，允许高度可定制的元素，而无需真正走出 HTML 框并进入 XML 框。来自 W3C 规范:

   The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. W3C Specification

   总而言之，文章 是一个不错的选择。

2. 是 IE。期望花费大量时间编写极其间接且可能完全不相关的代码，利用 IE 中的新想法。大多数旧想法在 IE 中不起作用。

3. 我认为这是个好主意。请注意您的模块数量，因为根据您的服务器配置，使用 php 包装器来容纳模块可能需要大量的文件读取和查找时间。

希望这对您有所帮助。