Question

我刚刚发现了伪类利用率（：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>

感谢您帮助澄清此主题

Answer 1

课程的关键用途是识别您网站的某些部分，这些部分在此处和那里重复，并且应始终使用相同的样式。比如，附加到列表中每个博客帖子的日期小部件。或者在这里和那里放置社交媒体小部件。

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

你需要某些东西来唯一地识别这些＆＃34;对象＆＃34; （是的，将它们视为独立的对象是一个好主意）。如果您以某种方式使用自定义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。

如果您不需要课程，因为您可以仅通过其标签或其父级的标签名称来识别元素，或者您的选择器已经足够明确定义且赢了＆＃ 39;如果你稍微移动一下，那么很容易打破，绝对不需要添加多余的类。但是，一般来说，将样式绑定到HTML的结构会产生紧密耦合，这几乎总是一个坏主意。

编写可维护的CSS是一门艺术。您需要为您的项目找到合适的余额。为了保持HTML和CSS的合理性，您需要开发更复杂，更精细的策略。对于简单项目的课程过分可能不值得。在复杂的项目中不惜一切代价避免上课，你最终会把自己描绘成一个难以维护的角落。

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

1 个答案: