CSS class and id with the same name

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.

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