Can the id and a class have the same name of an html element?

Question

The CSS allows that I can have a class called “.header”, as well as “.main”, “.footer”, “.aside” and so on... the same for IDs. In theory, I can have 3 selectors with almost the “same” name, like “article”, “.article” and “#article”. And I can do the same with all elements, including, why not, a class called “.html” and an ID called “#body”, etc.

For me, if I see the DOT I know that is a class, and if I see the HASH, I know that is an ID, so for me no confusions, but does it go against the naming conventions?

Answer 1

Yup, you absolutely can. If you’re the only one working on the project, and if this is intuitive to you, go right ahead, no issues.

But when working with a larger team, it generally makes sense to use ids and classes that are little more descriptive in nature. For example, .left-primary-sidebar would tell me a whole lot more about the element than something like .aside, when going through the stylesheet.

Your naming choices are definitely valid.

Naming conventions can differ from company to company, so if you’re the only one working on the repo, you can set your own conventions.