Should a Class or id be used here?

HTML-CSS
1

Which should be used here, Class, or id?

Class
https://jsfiddle.net/g6oaht8f/332/

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.3;
}

.jacketa .coversvg .front {
  fill: none;
  stroke: #08f9ff;
  stroke-width: 4px;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}


    <div class="jacketa">
      <svg class="coversvg" viewBox="0 0 47.96 51.66">
        <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path>
        <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path>
      </svg>
    </div>

id
https://jsfiddle.net/g6oaht8f/331/

.jacketa .coversvg #back {
  stroke: #000;
  opacity: 0.3;
}

.jacketa .coversvg #front {
  fill: none;
  stroke: #08f9ff;
  stroke-width: 4px;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}


    <div class="jacketa">
      <svg class="coversvg" viewBox="0 0 47.96 51.66">
        <path id="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path>
        <path id="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path>
      </svg>
    </div>
2

🤷 just use classes for everything, it’s much easier. What if you add another svg that has a #back and #front and you forget to update?

You really don’t gain anything of value from using IDs, they used to be much faster to look up so it made sense, difference is trivial nowadays.

They’re useful for JS because you can pass a string (no #) to getElementById (they also used to register as global variables, but I’m not sure if this behaviour has been stopped now, I haven’t got it to work for a while)

2 Likes
3

In the div? ID. but I have seen people use classes.