Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
ID — это селектор CSS, который позволяет стилизовать один уникальный элемент.
Его использование в CSS является общим и часто немного спорным.
Я лично избегаю идентификаторов для стилизации вещей в CSS, но я не собираюсь навязывать вам свои личные предпочтения.
В этом видео я расскажу о некоторых причинах, почему я предпочитаю селектор class , а не id , как работает специфика CSS и некоторые советы по написанию более модульного и многократно используемого кода.
Синтаксис
Давайте начнем с основ и посмотрим, как ID можно использовать для выбора элемента в CSS.
Учитывая эту серию <div> , если бы я хотел, чтобы третий был блоком функций, я мог бы добавить атрибут id в HTML следующим образом. Это уникальный идентификатор, немного похожий на ваш номер паспорта или номер социального страхования, и на любой странице может быть только один с этим значением.
<div>lorem ipsum</div> <div>lorem ipsum</div> <div id="feature-box" class="box">lorem ipsum</div> <div>lorem ipsum</div>
С атрибутом id добавленным в разметку, его можно выбрать в CSS с помощью символа хеша, который за пределами Великобритании иногда называют знаком фунта.
#feature-box { /* styles */ }
Теперь мы знаем, как использовать селектор идентификаторов, давайте посмотрим, почему я их не использую.
Проблема с идентификаторами
Я выделю две основные причины, по которым я не использую селектор идентификаторов в CSS:
- Они одноразовые
- Они вводят проблемы специфики
Одноразового использования
Одним из сильнейших инструментов CSS является селектор классов, который позволяет стилизовать несколько вещей, несколько раз с помощью одного блока кода.
Я часто использую класс «box» в демонстрационных кодах этой серии руководств, чтобы применить общие стили текста и цвета к элементам на экране, чтобы вы могли видеть, что происходит. Я могу повторно использовать этот класс столько раз, сколько мне нужно, и могу применить его к целому ряду различных элементов. Селектор класса не заботится о том, на какой элемент вы его поместите.
Если бы у меня был <div id="box"></div> я мог бы использовать это только один раз. Если я столкнулся с проблемой полной загрузки CSS, я, по крайней мере, хочу снова использовать его.
Размышление в многократно используемых блоках также может помочь вам разбить множество CSS на более мелкие куски, которые имеют большую вероятность повторного использования.
Чтобы сделать ваш код более модульным, рассмотрите возможность разбить вещи на отдельные классы для структуры и внешнего вида.
У нас может быть многократно используемый компонент кнопки со следующими структурными стилями:
.button { display: inline-block; margin: 1em 0; padding: 0.5em 1.5em; font-size: 1em; text-align: center; }
Затем мы можем создать серию классов-модификаторов, которые позволят нам создать ряд различных кнопок для использования в проекте.
.button-large { font-size: 2em; } .button-rounded { border-radius: 1em; } .button-confirm { color: #333; background: lightgreen; border: 1px solid darkgreen; } .button-cancel { color: #fff; background: crimson; border: 1px solid darkred; }
Эти классы модификаторов могут быть добавлены в разметку по мере необходимости, чтобы построить весь компонент из множества меньших частей.
<a href="#" class="button button-large button-confirm">OK?</a>
специфичность
Специфика определяет, какие стили применяются и когда.
При написании CSS вещи, которые идут дальше по таблице стилей, имеют тенденцию переопределять вещи, которые были объявлены над ними.
.box p {color: white;} .box p {color: black;}
Второй набор стилей перекрывает первый.
Какого цвета будет текст в этом фрагменте?
#box p {color: white;} .box p {color: red;}
Текст будет белым, потому что, хотя селектор класса идет после селектора идентификатора, идентификатор является более мощным селектором.
Как насчет сейчас?
#box p {color: white;} body h1 + div.box p {color: green;}
Текст все еще белый. Это связано с тем, как на самом деле рассчитывается специфичность.
Расчет специфичности
Возьмите этот ужасно сложный селектор — пожалуйста, никогда не пишите ничего подобного.
header ul#main-nav li .sub-menu li.child a:hover { }
Это будет стилизовать состояния наведения любых ссылок в подменю основной навигации сайта. Тьфу.
Для расчета специфичности этого селектора — т.е. что мы должны были бы придумать, чтобы переопределить эти стили где-нибудь еще в таблице стилей — нам нужно посчитать все атрибуты стиля, селекторы идентификаторов, классы и псевдоклассы и элементы, чтобы создать четырехзначное число.
Здесь нет атрибутов стиля. Итак, первое число 0.
Существует 1 идентификатор для «main-nav», который должен быть на ul для применения этого селектора.
Есть 2 класса, .sub-menu и .child и 1 псевдокласс .child :hover поэтому третье число — 3.
И наконец, есть 5 элементов; header , ul , li , li снова и a .
Поэтому значение специфичности для этого селектора
0, 1, 3, 5
Чтобы переопределить эти стили, нам понадобится другой селектор с одинаковой специфичностью, который будет отображаться ниже этого в таблице стилей, или селектор с более высокой специфичностью, который будет встречаться в любом месте файла.
Чтобы избежать этого безумия, вышеупомянутый селектор почти наверняка можно переписать как
.sub-menu a:hover { }
И имел тот же визуальный результат со специфичностью 0,0,2,1 которым было бы намного легче справиться, если бы его пришлось перезаписать на более позднем этапе.
Мне нравится сохранять свою специфику на низком уровне и поддерживать классы, где это возможно; это уменьшает зависимость от определенной структуры разметки и позволяет легко перезаписывать вещи с помощью другого отдельного селектора классов, если это необходимо.
Этот подход избегания id работает для меня, но ваши предпочтения могут отличаться. Я бы посоветовал вам попробовать этот подход, но только для того, чтобы выяснить, что действительно работает лучше для вас и вашей команды.
Следите за нашей статьей Quick Tip в ближайшее время!