Гайд по CSS-селекторам, расчёт специфичности в CSS. Приоритет и вес стилей.

Рет қаралды 8,029

Александр Ламков — Friendly Frontend

Күн бұрын

✏️ В этом уроке разбираем все виды селекторов, как они комбинируются, а также разберем вопрос о том, как работает специфичность селекторов.
🔴 Timeline:
▶ 00:00 | План урока
▶ 00:15 | Селектор по тегу
▶ 00:28 | Селектор по классу (class)
▶ 00:46 | Несколько классов
▶ 01:11 | Селектор по идентификатору (id)
▶ 01:58 | Селектор по атрибуту
▶ 02:50 | Селектор по атрибуту [attr*=value]
▶ 03:33 | Селектор по атрибуту [attr^=value]
▶ 03:59 | Селектор по атрибуту [attr$=value]
▶ 04:29 | Селектор по атрибуту [attr~=value]
▶ 04:43 | Разница [attr~=value] и [attr*=value]
▶ 05:20 | Селектор по атрибуту [attr|=value]
▶ 05:53 | Селектор по атрибуту [attr operator value i]
▶ 06:54 | Универсальный селектор “звездочка” (*)
▶ 07:20 | Совет по использованию универсального селектора
▶ 07:42 | Селектор потомка
▶ 08:29 | Группировка селекторов
▶ 08:56 | Объединение селекторов
▶ 09:41 | Селектор прямых дочерних элементов
▶ 10:25 | Смежный селектор (+)
▶ 10:56 | Смежный селектор (+), популярный прием
▶ 11:25 | Смежный селектор (~)
▶ 11:45 | Специфичность селекторов
▶ 12:24 | Система расчёта веса селектора
▶ 13:14 | Система расчёта веса селектора, примеры
▶ 14:20 | Выводы
▶ 14:59 | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css

Пікірлер: 46

@nick-rrdd 22 күн бұрын

это гениально... еще нигде не видел настолько крутых объяснений, особенно со специфичностью (весами) селекторов!

@Ivanfwit 10 ай бұрын

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

@user-rm2im6wx2b Ай бұрын

Ролики короткие информативные, спасибо, мне подача материала нравится.

@31danmaster31 10 ай бұрын

Круто, очень понятно и информативно. Лучше 95% видосов по этой теме 👍

@user-mj4sx2es3o 3 ай бұрын

Лучшее, что я видел по сабжу на ютубе, пожалуйста, продолжай!!!

@Qasta_qx 4 ай бұрын

Просто кайф😍, мне 16,недавно начал изучать Frontend- разработку, начал с Html и Css, думаю промотрю полностью твой плейлист по css, очень годно😏👍

@doomedmundane 2 ай бұрын

Привет, одногодка. Как успехи?

@Qasta_qx 2 ай бұрын

@@doomedmundane всё хорошо) по тихоньку двигаюсь вперёд

@doomedmundane 2 ай бұрын

@@Qasta_qx Так же. Недели две назад мне было скучно и я решил погрузиться в веб-разработку. За пару дней относительно разобрался в html, а ща грызу css. Уже нетерпится пощупать js

@ilya10rus 3 ай бұрын

Круто, Александр! Спасибо за вашу работу, буду проходить всё что вы преподаёте, это явно помогает для подготовки к собеседованиям. Курс мной пройден, но знания очень сырые, а вы и практику и теорию даёте немного по-другому, мне нравится подача)

@dsalodki 10 ай бұрын

Фигасе для новичков, я много лет работал с сайтами и не знал про i

@gvitoss 10 ай бұрын

Все хорошо объяснил, молодец

@filipp5544 10 ай бұрын

Круто 👍. Молодец, продолжай в том же духе, коллега)

@svitboomer8840 10 ай бұрын

Как всегда лучший!

@user-gu4oo1ts1c 3 ай бұрын

Лучший учитель!

@Sherzant 10 ай бұрын

Ёмкая информация!

@rustamakhmetyanov4404 10 ай бұрын

Крутой контент

@This_is_hellwood 9 ай бұрын

Навчаюсь в онлайн школі та паралельно продивляюсь твої відео. Дуже допомагає! Продовжуй в тому ж дусі!

@IvanDenisenkoetoya_dadaya Ай бұрын

Великолепно

@WebSEOkz 10 ай бұрын

С удовольствием посмотрел! Хорошо бы ещё сделать акцент, что не рекомендуется делать селекторы по тегу. А то когда меняю div на section, p на dl и прочее, то потом стили переписывать приходится.

@AleksanderLamkov 10 ай бұрын

Селекторы по тегу в чистом виде использовать действительно не стоит, а вот, например, li:not([class]) для задания вертикальных отступов для wysiwig-генерируемых элементов делать можно и нужно :)

@WebSEOkz 10 ай бұрын

@@AleksanderLamkov а зачем оперировать отсутствием класса, если можно добавить отдельный класс для нужных манипуляций со стилями?

@AleksanderLamkov 10 ай бұрын

Вот тут это подробно объяснял: aleksanderlamkov.notion.site/f81726f5dce049f1aa7da30741c6f5f4?pvs=4 Для всяких там ol, ul, ul, p, blockquote, table, img - добавлять классы не нужно, если эти теги впоследствии будут гегерироваться wysiwyg-редакторами.

@WebSEOkz 10 ай бұрын

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

@AleksanderLamkov 10 ай бұрын

Стилизация через селектор not позволяет не прописывать никаких классов родительским элементам. Как по мне - это удобнее :)

@zhaslanuly 6 ай бұрын

Привет, если в атрибуте alt тега img написать текст КАПСОМ, то будет ли он прочитан скринридерами не так как обычный текст?

@AleksanderLamkov 6 ай бұрын

Привет! Да, некоторые скринридеры зачитают его нестандартно, лучше избегать капс.

@evgeniy3370 18 күн бұрын

А что на счёт организации свойств для каждого элемента ? Порядок написания этих свойств. От кого-то слышал что стартует всё с order, далее position, потом margin,display,padding,with,higth,background и т.д. Я так понимаю это от команды зависит ?

@AleksanderLamkov 18 күн бұрын

Лично я придерживаюсь этим правилам: netology-university.bitbucket.io/codestyle/css/#order А вообще в рабочих проектах нередко используют плагин stylelint для автосортировки свойств.

@magazila 10 ай бұрын

Привет, знал только про звездочку. Альты никогда не писал картинкам, поэтому даже и не задумывался про селектор по альту. Мне кажется, что 80% всех (из видео) селекторов не используют, по крайне мере я нигде не встречал такого. а теперь хочу два вопроса спросить. 1) это вопрос по БЭМ. Можно ли записать так То есть, может ли блок в ложенный блок быть элементом первого, но быть отдельным блокоп? 2) Если какое-то правило в важности св-в, например позиция важнее ширины, или например размер шрифта важнее. Просто когда я пишу код, пишу так как взбредет в голову. Понимаю ни на что не влияет, но визуально вся эта разность немного бесит (я инфекционист больной просто).

@magazila 10 ай бұрын

А если какой-то способ вынести все св-ва в отдельную (скажем переменную), и оттуда по очереди писать значения св-в? Как например в миксинах через сцсс. Я миксины очень плохо понял, но чую что это имба для таких целей

@AleksanderLamkov 10 ай бұрын

Привет! > Мне кажется, что 80% всех (из видео) селекторов не используют, по крайне мере я нигде не встречал такого. Ну, это субъективно :) Я в своей работе использовал буквально все виды селекторов, кроме, пожалуй, селектора по атрибуту с оператором 'i'. Но мне он показался интересным, потому и включил в это видео. > 1) это вопрос по БЭМ. Можно ли записать так То есть, может ли блок в ложенный блок быть элементом первого, но быть отдельным блокоп? Да, может. По БЭМу любой HTML-элемент может быть одновременно БЭМ-блоком и БЭМ-элементом. То есть разметка будет вполне валидной. > 2) Если какое-то правило в важности св-в, например позиция важнее ширины, или например размер шрифта важнее. Просто когда я пишу код, пишу так как взбредет в голову. Понимаю ни на что не влияет, но визуально вся эта разность немного бесит (я инфекционист больной просто). Как таковых правил нет, на конечный функционал это не повлияет, но я всем советую соблюдать порядок свойств. На netology-university.bitbucket.io/codestyle/css/#order об этом хорошо написано.

@AleksanderLamkov 10 ай бұрын

@@magazila все свойства в одну отдельную переменную? Не совсем понимаю, что именно имеешь в виду. В чистом CSS одна переменная = 1 значение, которую можно объявить в любом селекторе на любом уровне, а затем использовать во всех потомках элемента. Миксины в пре-/пост-процессорах стилей - это действительно похоже на то, что ты спрашиваешь. Пример миксинов: github.com/aleksanderlamkov/fancy-auth-form/blob/main/src/styles/mixins.pcss Можно завернуть любую сложную логику и как функцию вызвать одной строчкой, передав "аругменты", которые затем внутри миксина развернутся в сколь угодно много строчек.

@magazila 10 ай бұрын

@@AleksanderLamkov Я имел ввиду что-то типа такого. Записать все св-ва в отдельный как я назвал переменную, в ней будут идти, все св-ва по очереди. А в самом селекторе обратиться к это переменной, и написать например через запятую. Что бы не писать каждый раз фонт фамэли, фонтсайз и т.д. а просто - Тахома, 14пх, bold, left

@magazila 10 ай бұрын

И "скрипт" сопоставив все это выдаст уже код из переменной с подставленными значениями. Тогда и писать много не придется, и все селекторы будут написаны красиво. А если в селекторе нет, какого-то св-ва, написать типа none, и тогда его пропустят. Или я придумал, что-то очень сложное и проще писать в ручную?

@LLuKKen Ай бұрын

Откуда ты всё это узнал? Дай название книги.

@AleksanderLamkov Ай бұрын

Привет! Просто опыт за годы работы. Ну а вообще, из книг по CSS могут посоветовать: Дэвид Макфарланд: Новая большая книга CSS Когда-то она сильно вправила моё понимание многих концепций.