🚀 С 25 по 29 августа пройдёт Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда.

В программе:

💡 Паттерны и подводные камни View Transition API в React (Николай Шабалин, СберЗдоровье)

🧠 Глубокое погружение в архитектуру React Hooks (Максим Никитин, Rocket Science)

⚙️ Разбор FSD 2.1 на практике, без догм (Лев Челядинов, FSD Core team)

📚Подготовка к архитектурному интервью для фронтендеров (Игорь Антонов, Т-Банк)

📐Layout-паттерны за пределами Flexbox и CSS Grid (Саша Илатовский, Albato)

🎯 Все темы прикладные, с практикой и кейсами.

🔗 Подробности и билеты

P.S: Для подписчиков группы Frontend разработчик скидка 500 р по промокоду react_crew_3_iyBLiN

Сократите свой CSS-код с помощью :where()

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

/* Without :where() */
.container > h1,
.container > .card h1,
.container > .card:last-child {
  border: 2px solid red;
  padding: 10px;
}

/* With :where() */
.container > :where(h1, .card .h1, .card:last-child) {
  border: 2px solid red;
  padding: 10px;
}

👉 @frontend_1

3 полезных совета по Tailwind CSS

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


1. Используйте size-{n} для одинаковой ширины и высоты

Вместо того чтобы отдельно задавать ширину и высоту, можно использовать утилиту size-{n}, если элементу нужны одинаковые размеры.

<!-- Вместо этого -->
<div class="w-12 h-12 bg-blue-500 rounded-full"></div>

<!-- Используйте это -->
<div class="size-12 bg-blue-500 rounded-full"></div>

Этот шорткат удобен для квадратов, кругов и любых элементов, где нужна равная ширина и высота.


2. Применяйте divide-{y/x}-{n} для равномерного разделения

Когда нужно добавить границы или разделители между дочерними элементами, вместо ручного добавления бордеров каждому ребёнку используйте утилиту divide-{y/x}-{n} на родительском контейнере. Это гарантирует единообразное разделение и уменьшает количество кода.

<!-- Вместо этого -->
<div>
  <div class="py-4 border-b">Item 1</div>
  <div class="py-4 border-b">Item 2</div>
  <div class="py-4">Item 3</div>
</div>

<!-- Используйте это -->
<div class="divide-y">
  <div class="py-4">Item 1</div>
  <div class="py-4">Item 2</div>
  <div class="py-4">Item 3</div>
</div>

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


3. Используйте произвольные варианты с [&_selector]:

Tailwind CSS позволяет применять стили ко всем совпадающим дочерним элементам через родителя с помощью синтаксиса [&_selector]:. Это делает HTML чище и удобнее в поддержке.

<!-- Вместо этого -->
<ul>
  <li class="mb-2 text-blue-500">Item 1</li>
  <li class="mb-2 text-blue-500">Item 2</li>
  <li class="mb-2 text-blue-500">Item 3</li>
</ul>

<!-- Используйте это -->
<ul class="[&_li]:mb-2 [&_li]:text-blue-500">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

👉 @frontend_1