HTML布局元素类名的标准？

我想解决如何让我的CSS尽可能脱离我的HTML。这样做的方法是以标准方式在HTML中编写基本布局元素，以便不同的CSS文件可以确切地知道它正在使用的标记看起来像什么而没有看到它。HTML布局元素类名的标准？

所以我想知道是否有任何地方存在一套标准，你应该如何命名你的布局元素以及将它们放入什么样的顺序。一个明智的方式来标记，我的网页将如下所示（请注意，我使用的是HTML5元素和以下the theory that you should never use IDs for CSS rules）：

<body> 
    <div class="container"> <!-- central "squeeze" for the content --> 
    <header> 
     <img class="logo" /> 
     <nav class="primary"></nav> <!-- main navigation --> 
    </header> 
    <aside class="pre"></aside> <!-- left column --> 
    <article class="main"></article> <!-- central main content --> 
    <aside class="post"></aside> <!-- right column --> 
    </div> 
</body>

许多网页使用类似这样的基本布局的东西。但正如您所看到的，“容器”或“主要”类的名称会有很大差异，对列使用<aside>也会有所不同。此外，排序可能有差异，就像有些人会将<nav>元素放在<header>之后而不是内部元素或<article>元素中的列元素一样。

有谁知道任何已经完成的工作来标准化这些常用布局元素的排序和命名吗？像微格式或其他东西？

来源

2011-12-23 Robin Winslow

对于类名没有硬性规定或普遍接受的标准，并且这里没有使用任何微格式。只要做你的网站的最佳选择，不要害怕为CSS使用ID - 他们会将ID选择器放在语言中，这是有原因的。 – BoltClock 2011-12-23 11:28:31

“你不应该为CSS规则使用ID的理论”来自哪里？从来没有听说过那个，我不明白它是有道理的。除了别的以外，id特别有用。 – 2011-12-23 11:29:14

从不使用ID的理论：https：//github.com/stubbornella/csslint/wiki/Disallow-IDs-in-selectors; http://oli.jp/2011/ids/; http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/。这是一些非常完善的理论，由在大型项目中使用CSS知道很多知识的人撰写。我绝对同意这一点。 – 2011-12-23 11:37:24

我不认为有一个绝对的标准，因为没有两个网站是相同的。

好吧，有些是，但那不是重点。 :)

无论如何，由于CSS是专门用来标记单个网站的，因此您无法实际解耦它的细节。你不会找到一些现成的CSS表格，你可以插入你的网站来放置所有的导航容器。

我认为最好的方法是为自己想出一个标准并坚持下去。我希望你能找到比常用但相当抽象的“容器”更好的名字。也许有一天，它会成为事实上的标准。

来源

2011-12-23 11:28:29 GolezTrol

我怀疑是这种情况。只是很多网站使用非常相似的布局（集中挤压内容，顶部标题，主导航，其次是主要内容，可选左列或右列），因此有可能制定标准这是最好的标记。随着标准越多，CSS和HTMl文档越多，理解和编辑这些文档的工作对于前端开发者来说就越容易。 – 2011-12-23 11:43:10

我会写我自己的标准，并在博客上发布它，或者在没有现有标准的情况下发布它，但在接受你的答案之前，我会在这里留下这个问题，以防别人知道某些有用的东西。 – 2011-12-23 11:43:44

HTML布局元素类名的标准？

回答

相关问题