Допустимо ли нацеливание на элемент CSS с идентификатором, только если он находится внутри определенного класса?

Question

У нас есть модальное и полное представление страницы нашего приложения.Для модального мы прикрепляем «модальный» класс к телу, чтобы мы могли выбирать элементы в зависимости от того, содержатся ли они в этом «модальном» классе.

Несколько предметов, на которые мы должны нацелить, имеют идентификаторы.Это плохая практика, чтобы выбирать эти предметы, как это?

.modal #child-element-with-id { ... }

Вышеописанное прекрасно работает во всех браузерах, которые я тестировал, но кто-то в обзоре кода жалуется на это с точки зрения запаха кода.

Я знаю, что идентификаторы предполагаютсябыть уникальным и не должно быть вложенным, но разве это не исключение?Мне кажется, это самый чистый способ нацеливания на идентификатор вместо того, чтобы придумывать отдельные идентификаторы для модального и полного просмотра страниц.

Answer 1

Стиль по идентификатору обычно не одобряется.Если у вас есть возможность редактировать разметку, почему бы не добавить класс к этим элементам с идентификаторами?

Вы можете обнаружить, что, как только вы ввели очень специфический селектор (0, 1, 1, 0), вы можетев конечном итоге придется добавить к нему позже что-то еще более конкретное - это сценарий, которого мы стараемся избегать.

… вместо того, чтобы придумывать отдельные идентификаторы для модальных и полных просмотров страниц

Я бы пересмотрел эту настройку и добавил бы классы к элементам с идентификаторами.Если вы уже стилизуете эти элементы с помощью #id, довольно легко поменять селектор CSS на класс.Если вы обнаружите, что не легко стилизовать эти #id s теперь, когда они являются классами - моя точка зрения уже может быть доказана:)

Надеюсь, это поможет!

Answer 2

Это будет работать, да.Однако, если вам нужно повторно использовать этот стиль для нескольких элементов, вы должны создать класс.

Например, если вы делаете:

.modal #child-element-with-id { /* same style */ }
.modal #child-element-with-id-2 { /* same style */ }
.modal #child-element-with-id-3 { /* same style */ }

Тогда вы должны создать класс, чтобы избежать стилядублирование.

Чтобы ответить на ваш вопрос, жюри все еще отсутствует, и вам придется решить, подходит ли выбор вложенного идентификатора для вашего варианта использования:)

Единственная проблема, которую я мог видеть: если вы перемещаете идентификатор в другой элемент, это может вызвать путаницу и затруднить отладку, потому что ваш CSS ожидает, что идентификатор будет вложен в класс.