Question

Trying to tidy up my CSS, it's a mess, I have a number of IDs spread throughout the divs, child divs so that I am able to select them in CSS.

I was wondering what the correct way of doing this ?

I thought about using classes, which appears to be a better way but still adding a class on every single div seems overkill - maybe using BEMS, good practice to scatter css classes on every element that i need to style ?

Then I thought about using direct child selectors and nth-child selectors, this would tidy things up but then the design is brittle as moving around the DIVS inside the html would break the css.

Can anyone suggest the best way of doing this.

Here's an example, using classes, they had IDs before, so it's better but I am not convinced about the semantics and re-usability. Any improvements that I could make would be really helpful. It is supposed to represent a card with two buttons along the bottom.

<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
避免使用tag-qualify
保持选择器简短
大量使用课程
力求简单
使用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代码的良好基础。

Answer 2

The most tidy way would be to use as less classes as possible, child's and even select tricks. lets take your code and show you what i mean.

.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>

As you know for child elements like the buttons you could also use the nth-child() selector. Keep in mind only use a class if the style differs from the other elements. if it doesn't use as less <code> as possible.

Hope it helps!

Answer 3

I would not hesitate to use classes or ids when they are needed. As long as you are not randomly adding them to elements and then not using them.

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

3 个答案: