👨‍💻 MilaNick materials — большая подборка материалов для frontend-разработчиков!

В репозитории собраны полезные ресурсы по веб-разработке: HTML, CSS, JavaScript, React, Node.js, Webpack, Git, тестирование и архитектура frontend-приложений. Есть статьи, курсы, видео, книги, разборы задач и практические материалы по асинхронности, ООП, алгоритмам, паттернам проектирования и созданию реальных проектов.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Не давай стилям компонента протекать во вложенные компоненты!

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

<article class="article">
  <p>Текст статьи</p>
  <div class="widget"><p>Текст виджета</p></div>
</article>

Обычный селектор по вложенности затронет оба <p>:

.article p {
  margin-block: 1em;
}

С @scope можно задать не только начало области, но и место, перед которым действие правил заканчивается.

@scope (.article) to (.widget) {
  p { margin-block: 1em; }
}

Первый <p> получит стиль, а <p> внутри .widget — уже нет. .widget здесь является нижней границей scope, поэтому элементы внутри неё исключаются из этой области.

Это особенно удобно для CMS-контента, markdown, rich-text и дизайн-систем, где внутрь одного компонента могут попадать другие независимые компоненты.

И не приходится усложнять селекторы:

.article > p,
.article > section > p {
  /* попытка описать структуру DOM */
}

Вместо описания всей структуры мы задаём архитектурную границу:

@scope (.content) to (.component) {
  a { text-decoration: underline; }
}

🔥 @scope специально предназначен для ограничения селекторов конкретным DOM-поддеревом без наращивания специфичности и жёсткой привязки CSS к структуре разметки.

📣 Code Ready | #совет

👩‍💻 Адаптирует картинки под разные устройства и поддерживаемые форматы!

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

Внутри <picture> обычно размещают:

• <source> — задаёт альтернативные версии изображения;
• srcset — указывает файл изображения;
• media — определяет условие выбора, например ширину экрана;
• type — указывает MIME-тип формата, например image/avif;
• <img> — служит основным или резервным вариантом изображения.

Браузер анализирует каждый тег <source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги не анализируются. Если тег <picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>.

📣 Code Ready | #атрибут