Как избежать пересечения идентификаторов CSS?

Пересечение имён классов и id в CSS избегают изоляцией стилей или строгими соглашениями об именах.

Способы

• БЭМ — имена привязаны к блоку: .card__title, а не просто .title.
• Префиксы — .app-, .ui- для библиотек и виджетов.
• CSS Modules — сборщик делает классы уникальными: .title → .Card_title__a8x2.
• Scoped-стили во Vue и Svelte.
• CSS-in-JS — уникальные классы генерируются автоматически.
• Shadow DOM — для виджетов, которые встраиваются на чужие страницы.

id

id должен быть уникальным на странице. В компонентах React его генерируют через useId(), во Vue — через useId() (3.5+) или уникальный префикс, чтобы несколько экземпляров компонента не дали одинаковых id.

const id = useId();
<label htmlFor={id}>Email</label>
<input id={id} />

Коротко для собеседования

Конфликты имён решают БЭМ и префиксы, CSS Modules, scoped-стили и Shadow DOM; уникальные id в компонентах генерируют через useId.

Подробнее: CSS Modules