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

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>

Avoiding IDs is a good idea, because each ID should only exists once per page. Classes are reusable an should be added to the needed div. In your example you're using a `.card` with child classes like `.button-container` or `.title`. I would recommend you to rename them to something like `.button-container` => `.card-footer` and simply place you buttons inside — julianstark999, May 16 '17 at 09:35
It's better to use classes as they are more efficient than element selectors — Pete, May 16 '17 at 09:48
Use context and semantics over verbosity. `.card img` instead of `.card-image` (change your card-image div to an img element). `.card p` over `.card-text`. Do you really need to style share-button differently from like-button, and if so, because they mean "share" and "like", or because they are the first and second buttons. i.e. how would you change the styling if you reversed the order of the buttons. If you don't intend to style the buttons differently, don't give them classes, just use `.card button`. Both your HTML and your CSS will be smaller and easier to maintain. — Alohci, May 16 '17 at 11:38

score 4 · Accepted Answer · answered May 16 '17 at 09:47

I guess it would be great to follow those best practices:

keep specificity low and reusability high
avoid using IDs
avoid tag-qualify
keep selectors short
make heavy use of classes
strive for simplicity
play with OOCSS and BEM naming convention

Object Oriented CSS is an approach of writing reusable CSS that is fast, scalable and maintainable. Generally, it's about creating abstraction and finding the patterns in your design. Going OOCSS way means that you should use more HTML classes in your markup.HTML classes:

have no affect on semantics
are not unclean
are not bad.. ;)

Too much HTML classes give you “classitis”, so use OOCSS approach wisely ;)

As an example, how this can be okay?

header nav ul li a:hover { … }

But this is not?

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

As Harry Roberts mentioned: "The cost of clean HTML is messy CSS. DOM-like selectors tie markup to your styles. We’re just loading our stylesheets with DOM information - they are no better than classes in your HTML."

By the way, there is a great website with high-level advices and guidelines for writing sane, manageable, scalable CSS by Harry Roberts:

http://cssguidelin.es/

Above will give you a good base to create reusable CSS code.

score 1 · Answer 2 · answered May 16 '17 at 09:39

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!

score 0 · Answer 3 · answered May 16 '17 at 09:39

0

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.

answered May 16 '17 at 09:39

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

3 Answers3