Search code examples
cssclasscode-reuse

Is it bad practice to reuse the same class multiple times, but holding different styles?

For example, I want to do something on the first <li class="first"> of a <ul> list.

and I write the CSS:

ul .first{
    /*awesome code here*/
}

But then, I also want to give a particular CSS to the first <p class="first"> of my <div id="content">.

and I do it like this:

#content .first{
    /*awesome code here*/
}

In case you didn't noticed, I reused the class first to give totally different styles to two totally different cases.

  • Is it bad to reuse classes in this way?
  • Is there any possibility that this lead to glitches/bugs?
Solution

  • It's fine by me because when you are intentionally defining what the first item and paragraph of your structure will look like. Although, it'd be better if you used :first-child pseudo selector but then again both will have different styles because that's what you want.

    I hope I'm not missing the big picture here but I'm also wondering what you meant with code reusability in this case?

    If you are going to use ul.first then you have to change your

    <li id="first" to <li class="first"