Почему выбор по идентификатору не рекомендуется в CSS?

Ответ 1

CSSLint дает руководство, почему они делают свои рекомендации:

Идентификаторы не должны использоваться в селекторах, потому что эти правила слишком тесно связаны с HTML и не имеют возможности повторного использования. Гораздо предпочтительнее использовать классы в селекторах, а затем применить класс к элементу на странице. Кроме того, идентификаторы влияют на вашу специфику и могут привести к специфическим войн.

(ссылка)

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

Ответ 2

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

Зачастую разработчики будут использовать очень высокий селектор специфичности, когда общей формы будет достаточно:

#foo #bar #baz .something a {
    text-decoration: underline;
}

вероятно, лучше писать как

.something a {
     text-decoration: underline;
}

Кроме того, такие стили написаны как:

#foo-1,
#foo-2,
#foo-3,
#foo-4 {
    color: #F00;
}

лучше писать как:

.foo {
    color: #F00;
}

Где я отличаюсь от CSSLint, используются структурные идентификаторы, которые повторно используются.

Я часто выделяю страницы с этой структурой:

<div id="page">
    <div id="page-inner">
        <header id="header">
            <div id="header-inner"></div>
        </header>
        <nav id="nav">
            <div id="nav-inner"></div>
        </nav>
        <div id="wrapper">
            <div id="wrapper-inner">
                <div id="content">
                    <div id="content-inner">
                        <article></article>
                        ...
                    </div>
                </div>
                <div id="sidebar">
                    <div id="sidebar-inner">
                        <div class="module"></div>
                        ...
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer">
            <div id="footer-inner"></div>
        </footer>
    </div>
</div>

И поскольку я знаю, что структура согласована, я не против использовать #page, #header, #nav, #wrapper, #content, #sidebar и #footer в моем css для подметая специфические для региона стили. Эти стили тесно связаны с этой конкретной структурой, что делает их менее многоразовыми; потому что я повторно использую структуру, они многоразовые. Важно помнить, что использование идентификатора в селекторе очень специфично и должно использоваться экономно.

Несколько слов на specificity:

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

Если вы нацеливаете все элементы <a>, то имеет смысл использовать a.
Если вы нацеливаете все элементы <a> внутри <div class="foo">, тогда имеет смысл использовать .foo a.
Если вы нацеливаете все элементы <a> внутри <div id="bar">, тогда имеет смысл использовать #bar a. Однако, вы можете использовать более низкий селектор специфичности. [id="bar"] a имеет ту же специфичность, что и .foo a, что означает, что вы все равно можете нацеливать определенные элементы по идентификатору без создания селекторов с излишней высокой специфичностью.

Я не рекомендую использовать селектор [id="XXXX"] для выбора атрибута [id], поскольку он многословен и может вызвать путаницу. я do рекомендуется использовать селектора [data-id="XXXX"] для выбора на основе настраиваемых атрибутов [data-*] для более тесного отношения стилей к текущему состоянию узлов DOM.

Ответ 3

Прежде всего:

CSS Lint, как JS lint, - это мнение, замаскированное под валидацию, а не авторитет.

Я занимаюсь этим пять лет. Я работал на очень крупных торговых площадках, в интерактивных агентствах, в качестве сольного подрядчика, и в настоящее время я в фирме SaaS.

Идея, что идентификаторы однозначно плохи, ИМО - это только идея, к которой вы могли бы прийти, если бы ваш CSS-fu, когда дело доходило до общения с командами, было не так уж полезно начинать с.

Хороший, гибкий CSS, IMO, следует следующим общим рекомендациям:

• Всегда переходить от общего к конкретному. Шрифт-семья и наиболее распространенный размер шрифта для общего текста тела, например, должны быть объявлены только в одном месте. Когда вы переходите к селекторам, которые обычно включают использование классов, вы начнете переопределять размер шрифта. Когда пришло время применить в основном неиспользуемое семейство шрифтов к очень определенному подмножеству HTML, то, когда имеет смысл использовать идентификатор в контейнере, чтобы поразить элементы, получающие изменение текста тела.

• Чем более широко применяется свойство, тем проще будет переопределить, и вы никогда не должны беспокоиться о том, чтобы случайно переписать свои самые общие свойства. Это, например, body#some_id div, является невероятно плохим селектором для использования по этой причине. На уровне 2-го уровня (3... ish), где вы обычно больше разбираетесь в связках обычно повторно используемых элементов, привязанных к классифицированным контейнерам, должно быть немного сложнее перезаписать эти свойства случайно. "Случайно" случается чаще, ИМО, когда у вас есть кучи многоклассных селекторов повсюду. В последнем уровне вы должны иметь дело не с повторно используемыми элементами, а с переопределением для особо определенных разделов документа. Использование идентификатора в этих обстоятельствах является идеальной практикой, а не плохим, но идентификаторы лучше всего использовать экономно и только для конкретных свойств элементов в контейнере элементов, которые действительно необходимо изменить идентификатору.

• Чем более конкретным является селектор, тем сложнее его нарушить случайно. Конкретно, я имею в виду не только идентификаторы элемента. Я имею в виду контейнерный элемент ID'd, который находится рядом с элементом, на котором вы на самом деле нацелены. Однако преднамеренное переопределение должно всегда включать минимальные усилия, в которых идентификаторы фактически помогают, а не мешают вам (см. Пример ниже). Если вы когда-нибудь окажетесь в положении "истечения идентификаторов, классов и тегов", я рекомендую насилие (по крайней мере, мнимое насилие). Но серьезно, кто-то заслуживает того, чтобы его ударили.

• Избегайте длинных списков селекторов: вы должны начать чувствовать, что вы "делаете это неправильно" в любое время, когда вы регулярно используете значения 4+ селекторов для объявления. Я не стал бы считать > тегом/значением при подсчете голосов, так как использование этого разумно является превосходной практикой как для удобства обслуживания, так и для производительности.

• Избегайте определенных ракурсов оружия: Вы знаете парня. "Не возиться с моим материалом" новичок, который решил, что лучший способ прикрыть его прикладом, - это использовать каждый тег, селектор и идентификатор, которые он мог бы начать с тела. Не нанимайте этого парня или шлепайте его, пока он не остановится. Но даже в более перспективных командах гонки на гонках могут продолжаться невинно, если вы не (экономно) добавляете больше веса для селекторов в местах, где это имеет смысл.

В частности, минималистский подход огромен. Чем больше вы полагаетесь на размещение HTML, чтобы избежать необходимости использования CSS в первую очередь, тем лучше. Лучшая работа, которую вы сделали при распространении самых общих стилей во всем мире, тем меньше вам приходится беспокоиться в более конкретных контекстах. Чем точнее намеченные и сжатые особо специфические переопределения свойств, тем легче им управлять в долгосрочной перспективе. И именно здесь политика неидентификационного типа является глупой ИМО.

Что более практично и просто переопределить?

Это:

body .main-content .side-bar .sub-nav > ul > li > button

Или это?

#sub-nav button

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

Итак: Старайтесь никогда не использовать более одного идентификатора и только для свойств, которые являются локальными для контейнера, который не содержит других контейнеров. Старайтесь никогда не использовать более одного или двух классов. Избегайте классов и идентификаторов, которые нацелены на элементы с высокой (контейнеры, которые они представляют, представляют собой много предков-узлов выше). Более 3-4 тегов, вероятно, слишком много в большинстве случаев, пока не наступит время для некоторого обслуживания или обучения/порки новобранцев. И следуйте правилу бойскаута. Заменяйте эти импортеры и, очевидно, чрезмерно специфические селектора, когда вы идете, когда это безопасно.

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

Ответ 4

Их аргумент упоминается lonesomeday в своем ответе, что он плотно связывает его с HTML и не позволяет повторно использовать.

Я могу сделать аргумент, что бывают случаи, когда вы не хотите, чтобы стиль использовался ничем, кроме одного элемента, поэтому определение его в селекторе id имело бы смысл.

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

Ответ 5

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

Ответ 6

КОМПОНЕНТЫ: если вы пишете компонент многократного использования, например, таблицу с идентификатором (например, <div id="data">), тогда, если вы поместите две таблицы в один документ, вы получите INVALID html.