How to keep track of every id and class in html?

Question

Let's say I have a big (200+ lines of html/css) code. I have to give a lot of id(s) and classes.
How to properly name everything so that you remember what is that certain html element id/class?
(I've been naming things like... name1, name2, nameA, nameB, but it gets confusing because of the numbers, letters, or similarity.

Answer 1

name them according to their function or purpose.
use long names to describe them precisely, keep whatever naming convention you chose consistent across the whole code.
group similar parts of your code in blocks.
sketch a design of your page before you start writing it... etc.

Answer 2

Ko given the right one. use real time name instead of code name if they are multiple use add number to it's suffix...
Can understand what I am say?

Answer 3

Just give a comment section in each id or class

Answer 4

Personally I always name classes after the utility it provides. For example: If I have a div-element that contains multiple buttons that perform actions with my content, I'd name the class "action-container". Furthermore I would refrain from using id's. while they give you a lot of utility for stiling individual elements, they also lead to a lot of duplicated css properties.

Answer 5

just use real name