CSS:避免 ID？使用类/直接子选择器/第 n 个子？

Question

试图整理我的 CSS，一团糟，我有许多 ID 分布在 div 和子 div 中，以便我能够在 CSS 中选择它们。

我想知道这样做的正确方法是什么？

我考虑过使用类，这似乎是一种更好的方法，但仍然在每个单独的 div 上添加一个类似乎有点过分了——也许使用 BEMS，这是将 css 类分散到我需要设置样式的每个元素上的良好做法？

然后我考虑使用直接子选择器和第 n 个子选择器，这会把事情整理好，但是设计很脆弱，因为在 html 中的 DIVS 周围移动会破坏 css。

谁能建议最好的方法。

这是一个例子，使用类，他们以前有 ID，所以更好，但我不相信语义和可重用性。我可以做出的任何改进都会非常有帮助。它应该代表一张底部有两个按钮的卡片。

<div class="card">
  <div class="card-image"></div>
  <h2 class="title">My test card</h2><span class="subtitle">by authors name</span>
  <p class="card-text">Great info available at this location...................</p>
  <div class="button-container">
    <button class="share-button">Share</button>
    <button class="like-button">like</button>
  </div>
</div>

Answer 1

我想遵循这些最佳实践会很棒:

• 保持低特异性和高可重用性
• 避免使用 ID
• 避免标签修饰
• 保持选择器简短
• 大量使用类
• 力求简单
• 尝试 OOCSS 和 BEM 命名约定

Object Oriented CSS是一种编写快速、可扩展和可维护的可重用 CSS 的方法。通常，它是关于创建抽象并在您的设计中找到模式。采用 OOCSS 方式意味着您应该在标记中使用更多 HTML 类。HTML 类:

• 对语义没有影响
• 不洁净
• 还不错.. ;)

过多的 HTML 类会给您带来“分类问题”，因此请明智地使用 OOCSS 方法；)

举个例子，这怎么行？

header nav ul li a:hover { … }

但这不是吗？

<span class=”icon icon--notext icon--user”>

正如 Harry Roberts 所说:“干净的 HTML 的代价是凌乱的 CSS。类 DOM 选择器将标记与您的样式联系起来。我们只是用 DOM 信息加载我们的样式表——它们并不比 HTML 中的类好多少。”

顺便说一下，Harry Roberts 有一个很棒的网站，其中包含关于编写合理、可管理、可扩展的 CSS 的高级建议和指南:

• > http://cssguidelin.es/

以上内容将为您创建可重用的 CSS 代码奠定良好的基础。