What to do when class/id names run out

Question

css

Every time when working on a large project, when the number of lines of code goes into thousands for a long time, the same problem arises: at some point it becomes very difficult to come up with a name for the class.

How to decide? where to get "inspiration"?

Answer 1

In general, this is a very important and rare skill to give names / names to objects in programming. I often spend time just trying to find the correct and understandable name (and even google how other developers call similar things, and also look for translations of words), and not write the code itself.
As for inspiration, it's better to change the naming system. For example, make a unique class for the block, and inside use classes with a prefix (similar to the BEM system proposed by Yandex), like:
.b-news-teaser (inside b-new-teaser-header, b-new-teaser-list, b -news-teaser-item, b-news-teaser-sticky-flag and so on), next to .b-top-comments (within classes with the same prefix), then .b-top-articles and so on. That is, only the block has unique names, and internal classes use a prefix.
This, by the way, will give the layout certain properties of "reinforced concrete" - you can transfer the block from one page to another, and nothing will break. And changing CSS styles in one news block will not break the layout of the forum (since all blocks use unique class names).
Naturally, your layout will have the above properties only if you follow an adequate approach (otherwise there are comrades who write something like p { font: ... }, or even * { color: black; } well, as you know, you can’t help fools with anything) .
As for id, they should be avoided or clever naming should be used. Imagine you have created a login form on a page that has a field-username and a field-password, and tomorrow you need to add the same form at the bottom (and clicking on the label in the bottom form starts scrolling the page up). Or open in popup. Or something else. You must either discard the id, or, if not, add unique prefixes to them (for example, #top-form-field-username and #popup-form-field-username).

Answer 2

I'm not a layout designer, but I try to give elements "speaking" classes and identifiers that follow from the assignment. Accordingly, if you have an element to which you want to give a class that is busy, then you have problems with the structure.

Answer 3

Of course, I have much more modest swings in layout, hundreds of 5 lines at most, but I try to assign id only to really important elements that interact with scripts or are anchors. And I don’t worry about class names at all, the main thing is that they reflect the essence, and if they want, let them repeat, since I use nesting rules in css, that is:
.header {}
.element-1 .header {}
.element-2 .header {}

Answer 4

Come up with your own classification.

Answer 5

I do this:
- All the names of classes and identifiers are full English words, nouns. For functions and methods - verbs. No abbreviations or transliteration.
— I use nesting hierarchy. For example, "inventory_weapon" is the id of the weapon container in the inventory container.
— If necessary, I use the same class names and identifiers.