85

Is there anything wrong with having a css class and id with the same name? Like .footer for the article/post's footer and #footer for the page footer.

5 Answers 5

107

Nope, perfectly acceptable.

A class is defined using a . and an ID is defined using a #. So as far as the browser is concerned, they're two totally separate items.

The only thing to be careful of is generating any confusion for yourself. It's probably best practise to keep the names different purely for code readability, but there's no harm in them being the same.

6
  • 6
    Ditto. And with HTML5 some elements will have the same name like footer. footer.footer#footer may be confusing :)
    – FelipeAls
    Jul 15, 2010 at 8:41
  • 1
    @Felipe - that'll get confusing quickly! Jul 15, 2010 at 9:50
  • From the example of OP with footer and your concise explanation, my first thought was for these new elements but in fact, it should be the contrary: no more div.footer and div#footer! They'll be replaced by footer (targeted by, say, body>footer and section footer) and no need for class and id anymore in many cases. My bad.
    – FelipeAls
    Jul 15, 2010 at 13:16
  • "." (dot) and "#" (hash-tag) are jQuery selectors (in use for jQuery only), and there is no connection between these signs and what the browser know. Mar 3, 2015 at 13:25
  • @GilEpshtain # is not jQuery only, anchor tags can be used in URLs: stackoverflow.com/questions/3253775/… links to your comment directly Apr 23, 2015 at 16:13
15

No, there is nothing wrong, but it might be better to use different names to not confuse other developers. It is more (human) error prone to use different names.

3

Yes, you can use same name for both id and class because both parameters have their own significance.

1

The only problem with having same name for class and id is code readability and maintainability. They can have the same names, the browser will render the correct CSS as classes and ids are marked differently (. for class and # for id), but an upgrade or bug fix can be a problem for the developer.

1

It's completely valid but you should be aware where you put those id attributes, e.g. you can have element like this:

<main id="main" class="main">...</main>

And this is completely valid because you cannot have more main elements on specific page

But here's the situation that may occure some issues with duplicates

<section>
  <header class="header" id="header">...</header>
</section>

<article>
  <header class="header" id="header">...</header>
</article>

You may have multiple header elements on your website so you need to be sure that your id differs from each other header elements

<header class="header" id="unique-header">...</header>
<header class="header" id="another-unique-header">...</header>

With this approach you can share your styles and have two unique elements

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.