用 HTML 开发...没有类/ID答案

【问题标题】：Develop in HTML... without classes/ID用 HTML 开发...没有类/ID
【发布时间】：2016-11-17 17:43:40
【问题描述】：

我刚刚发现了伪类的使用情况（:nth-child 等...）。

我对此有一个疑问：使用那些允许在 HTML 代码中抑制类的伪类是一种好处吗？与 SEO、性能、W3C 等有关...

这是一个例子（只是一个测试，所以没有响应并且图像没有加载，但我们不在乎）：https://codepen.io/anon/pen/XNjQEM

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Exercice Facultatif">
    <meta name="author" content="Nathan Cheval">
    <title>Exercice facultatif</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body> 

    <!-- START HEADER -->
    <header>
        <div>
            <img src="imgs/logo.png">
        </div>
        <nav>
            <ul>
                <li><a href="#">Acceuil</a></li>
                <li><a href="#">Activités</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <!-- END HEADER -->

    <!-- START CONTENT -->
    <div>
        <section>
            <article>
                <div>
                    <figure>
                        <img src="imgs/mtp.png" alt="Lac de Montpellier">
                        <figcaption>
                            Lac de Montpellier
                        </figcaption>
                    </figure>
                </div>
                <div>
                    <h1>Les lacs d’Occitanie</h1>
                    <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.<br><br>
                     Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. <br><br>
                     Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.<br><br>
                    </p>
                    <a href="#">Lire la suite...</a>
                </div>
            </article>
            <hr>
            <article>
                <div>
                    <figure>
                        <img src="imgs/mtp.png" alt="Lac de Montpellier">
                        <figcaption>
                            Lac de Gergovie
                        </figcaption>
                    </figure>
                </div>
                <div>
                    <h1>Les lacs d’Auvergne</h1>
                    <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.<br><br>
                     Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. <br><br>
                     Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.<br><br>
                    </p>
                    <a href="#">Lire la suite...</a>
                </div>
            </article>
            <div class="clear"></div>
        </section>
    </div>
    <!-- START CONTENT -->
</body>
</html>

感谢您帮助澄清这个问题

【问题讨论】：

搜索引擎优化：谁知道，问问谷歌。性能：衡量它。 W3C：这甚至意味着什么？我建议你尝试使用仅使用 :nth-child 选择器之类的中等复杂 CSS 编写一个中等复杂的网站……你的 CSS 将一团糟！
一直使用:nth-child 选择器的样式完全是个坏主意。通过这种方式，您不能将相似的项目分组到一个类中并对其进行唯一的样式设置。因此，您的 css 大小将显着增加。
类使您的代码更具声明性。找到一个有效的类命名系统并坚持下去。
我在任何领域都看不到任何优势。您会放弃一些非常强大的功能，而不会产生任何积极的副作用。

标签： html css class css-selectors

【解决方案1】：

类的主要用途是识别您网站的某些部分，这些部分在这里和那里重复，并且应该始终使用相同的样式。比如说，附加到列表中每个博客文章的日期小部件。或者放置在各处的社交媒体小部件。

<div class="posted-date">
    <span class="month">Sep</span>
    <span class="day">16</span>
</div>

您需要一些东西来唯一标识这些“对象”（是的，将它们视为独立的对象是个好主意）。如果您以一种或另一种方式使用自定义 HTML 标记，这是一个很好的标识符：

<posted-date><month>Sep</month><day>16</day></posted-date>

在这种情况下，您不需要类，因为标签名称具有足够的自我识别性。如果你想坚持某个 DTD 并且不能/不会定义你自己的标签，类代替这个角色。

此外，在中等复杂的 HTML 中，仅使用 :nth-child 选择器等，在某种程度上，您最终总是会通过它们在页面中的位置来识别元素：

header > nav ul li:nth-child(2) span { /* the date widget /* }

那么，当你移动一个元素时会发生什么？现在你也需要调整你的 CSS。或者，如果相同的元素位于页面上的不同位置并且每次都应该接收相同的样式？您需要指定很多选择器，并且每次将项目放置在新的位置时，都要再次调整 CSS。

如果您不需要类，因为您可以仅通过元素或其父标签名称等来很好地识别元素，或者您的选择器已经定义得足够好并且不会轻易破坏 如果你稍微移动一下，绝对不需要添加多余的类。然而，一般来说，将样式绑定到 HTML 的结构会产生紧密耦合，这几乎总是一个坏主意。

编写可维护的 CSS 是一门艺术。您需要为您的项目找到合适的平衡点。您需要开发越复杂、越精细的策略来保持 HTML 和 CSS 健全。在简单的项目上过度使用课程可能不值得。不惜一切代价避免在复杂项目上上课，你最终会将自己描绘成一个无法维护的角落。

【讨论】：

"几乎总是一个坏主意" 不同意，在很多情况下您确实想要在特定位置设置元素样式（即使它们不是第一个或最后），但是将整个样式表与 HTML 紧密耦合的一般想法绝对是不行的。
即使在这种情况下，我也可能宁愿为某些父元素添加一个附加类，而不是为特定位置编写选择器。显然，总是会有 location-based 和 identity-based 样式的混合。您只想让基于位置的选择器尽可能少见且尽可能短。 body > header > nav > ul > li > span 肯定过于具体和不灵活。
拥有一个唯一目的是标记元素位置的类或 id 是没有意义的。
确实，这就是为什么它应该是一个描述性修饰语。元素 1 与元素 2（或其父元素）有什么不同，让您想对其应用不同的样式？将其描述为一个类。 .primary、.secondary 或类似的东西。
我同意。我也倾向于更加强调保持标记在语义上的意义并围绕它设计 CSS，只在绝对必要的情况下添加可供性。顺便说一句，我认为将 CSS 与 HTML 分离的想法有点奇怪（尽管松散耦合是另一回事）。每个人编写 HTML 的方式都不同——几乎不可能设计出一个样式表来为不同人或程序编写的各种文档设置样式。然而，有些人似乎不这么认为。