CSS: 避开 ID？使用类 / 直接 child 选择器 / nth-child?

Question

试图整理我的 CSS，一团糟，我有许多 ID 散布在 div、child div 中，所以我我能够 select 他们 CSS.

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

我考虑过使用 classes，这似乎是更好的方法，但仍然在每个 div 上添加 class 似乎有点过分了 - 也许使用 BEMS，这是一个很好的实践将 css classes 散布在我需要设置样式的每个元素上？

然后我考虑使用直接 child selectors 和 nth-child selectors ，这会把事情整理好，但随着四处移动，设计很脆弱html 内的 DIVS 会破坏 css.

谁能建议最好的方法。

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

<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

最整洁的方法是使用尽可能少的 classes，儿童甚至 select 技巧。让我们把你的代码告诉你我的意思。

.card {
}

.card div.card-image {
 /* select the card-image */
}

.card > h2 {
  /* select the h2 title */
}

.card > span {
  /* select the <span> */
}

.card > p {
  /* select the paragraph */
}

div.card div.button-container {
  /* select the button container */
}

div.card div.button-container button:first-child {
  /* select the first button */
}
div.card div.button-container button:last-child {
  /* select the last (second) button */
}

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

如您所知，对于按钮等子元素，您也可以使用 nth-child() select 或。请记住，仅当样式与其他元素不同时才使用 class。如果它不使用尽可能少<code>。

希望对您有所帮助！

Answer 2

我会毫不犹豫地在需要时使用类或 ID。只要你不是随机将它们添加到元素中然后不使用它们。

Answer 3

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

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

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

对语义没有影响
并非不洁
还不错.. ;)

太多 HTML 类会给你“classitis”，所以明智地使用 OOCSS 方法 ;)

举个例子，这怎么行？

header nav ul li a:hover { … }

但这不是吗？

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

正如 Harry Roberts 所说：“清洁 HTML 的成本是混乱的 CSS。 DOM-like 选择器将标记与您的样式联系起来。我们只是用 DOM 信息加载我们的样式表 - 它们并不比 HTML 中的类好。"

顺便说一下，Harry Roberts 有一个很棒的网站，其中提供了编写理智、可管理、可扩展的高级建议和指南 CSS：

http://cssguidelin.es/

以上将为您提供创建可重用 CSS 代码的良好基础。

CSS: 避开 ID？使用类 / 直接 child 选择器 / nth-child?

CSS: Avoiding IDs ? Use classes / direct child selectors / nth-child?

css

bem

CSS: 避开 ID？使用 类 / 直接 child 选择器 / nth-child?

CSS: Avoiding IDs ? Use classes / direct child selectors / nth-child?

css

bem

CSS: 避开 ID？使用类 / 直接 child 选择器 / nth-child?