@layer

Це директива, яка дозволяє розбивати CSS на логічні шари й точно задавати порядок їх застосування. На відміну від класичної каскадної моделі, де все залежить від специфічності або того, який файл підключили пізніше, @layer дає змогу керувати каскадом декларативно.

Можна створити шари з іменами reset, base, components, utilities і зафіксувати їхній порядок:

@layer reset, base, components, utilities;

Після цього, незалежно від місця розташування стилів у файлі чи в пакеті, браузер чітко знає, в якій послідовності їх застосовувати.

Це особливо важливо в масштабних проєктах, де на один елемент можуть впливати стилі з різних джерел — наприклад, базові стилі, компоненти, утиліти або сторонні бібліотеки. Без @layer доводиться або боротися зі специфічністю, або покладатися на порядок підключення, що часто веде до неочікуваних результатів. @layer усуває цю невизначеність.

Працює з будь-якими CSS-фреймворками, підтримується в усіх сучасних браузерах. У поєднанні з @import або підключенням стилів із різних джерел дає хорошу основу для модульного й передбачуваного CSS.

MDN

@babichdev

.

Твій CSS працює тільки тому, що твій користувач теж читає зліва направо. Але що буде, коли доведеться підтримувати арабську, іврит або вертикальний текст?

Сьогодні тема дня — CSS Logical Properties, набір властивостей, що описують просторові характеристики елементів не через фіксовані сторони (left, right, top, bottom), а через напрям потоку контенту: блоковий (block) і лінійний (inline). Вони автоматично підлаштовуються під мовні налаштування: наприклад, працюють справа наліво в арабській або зліва направо в українській — без додаткової логіки.

І замість цього:

padding-left: 1rem;
padding-right: 1rem;

пишемо просто:

padding-inline: 1rem;

Відступ буде з обох боків — але залежно від напрямку тексту. Те саме з вертикальними відступами:

margin-block-start: 1rem;
margin-block-end: 2rem;

Це працює замість margin-top та margin-bottom, адаптуючись під вертикальні або змішані потоки.

Для позиціонування можна замінити left або right на логічну альтернативу:

inset-inline-start: 0;

Це означає «притиснути до початку рядка», незалежно від того, це left у LTR чи right у RTL.

А для вирівнювання тексту:

text-align: start;

Це працює як left або right, залежно від мови інтерфейсу, і допомагає уникнути дублювання стилів у багатомовних проєктах.

Цей підхід значно спрощує підтримку інтерфейсів, які мають адаптуватися до RTL, вертикального письма чи просто бути однаково коректними у глобальних продуктах. Менше дублювання, менше умов, менше edge cases.

Logical properties включають не лише відступи, а й розміри, абсолютне позиціонування, і навіть бордери з їхнім радіусом. Це не синтаксичний цукор над margin-left, а повноцінна система, що базується на напрямку тексту.

До речі, напрямок буває не лише зліва направо чи справа наліво. Є ще вертикальний — згори донизу, наприклад у японській чи китайській розмітці. Якщо ж десь існує система письма з напрямком знизу вгору — напишіть, я такого ще не бачив.

Підтримується в усіх сучасних браузерах. Якщо проєкт має працювати в кількох мовних середовищах — логічні властивості варто починати використовувати вже зараз.

Особисто я користуюсь ними не так, аби давно, але мені ця фіча надзвичайно подобається (хоча зізнаюсь — переважно аби не писати окремо left і right). А ви вже використовуєте logical properties? Якщо ще ні — цікаво, що стримує. Напишіть у коментарях.

MDN

@babichdev

P.S. За вподобайки і поширення буду вдячний як білочка за горішок.

CSS довгий час нагадував традиційну родину: батьки вирішують усе, діти виглядають і поводяться так, як їм скажуть. Але час іде, нащадки виростають, починають сперечатися, обирати власний одяг і переклеювати шпалери в батьківській кімнаті. І от навіть у веброзробці настав момент, коли молодші елементи навчилися вказувати, як жити старшим.

Як ви вже могли здогадатися, сьогодні тема дня — псевдоклас :has(), який фактично додає можливість стилізувати батьківські елементи залежно від того, чи мають вони в собі той чи інший елемент або чи перебуває він у певному стані.

Приклад:

.card:has(input:checked) {
  background-color: #def;
}

Тло .card зміниться, якщо всередині буде увімкнений чекбокс.

Або ще:

form:has(:invalid) {
  border: 2px solid crimson;
}

Форма сама підсвітиться, якщо хоча б одне поле буде помилковим. Це працює без жодних додаткових класів, без скриптів, без ручної синхронізації стану. Просто CSS.

До речі, якщо такі розбори допомагають краще розуміти можливості сучасного CSS — збережіть допис, поставте вподобайку і поширте тим, кому це теж буде цікаво. Це підтримує розвиток каналу. І мені пріятно.

Та справжня сила :has() розкривається у поєднанні з CSS Nesting.

Ось дещо розширений приклад із картинки:

.card {
  section:has(&.active) {
    border: 2px solid gold;
  }

  article:has(&) {
    color: lime;
  }
}

Якщо .card має клас active, тоді батьківський section, що містить цю .card, отримає рамку. А якщо .card просто існує всередині article — то цей article отримає колір тексту lime.

Варто звернути увагу на кілька моментів.

По-перше, ми описуємо це з точки зору самої .card. Саме .card ініціює правило, а не батьківський елемент.

По-друге, & — це посилання на сам елемент .card у вкладеному CSS. Тобто ми можемо всередині одного правила описати, як наявність або стан елемента впливає на зовнішній світ навколо нього.

Тож це правило читається так: "знайди section, який містить нащадка .card із класом active, і знайди article, який містить нащадка .card, незалежно від стану".

Що найголовніше — усе це працює без JavaScript, без дублювання стану і без костильних класів.

Підтримується у всіх сучасних браузерах: Chrome, Safari, Edge, а також у Firefox, починаючи з версії 121.

А ви вже пробували використовувати :has() у своїх проєктах? Якщо ще ні — кліпніть двічі, ми вишлемо когось вас визволяти. Але однак напишіть у коментарях.

MDN

@babichdev

КОРИСНІ ОГОЛОШЕННЯ
з етеру Лайвкодинг! Менеджер завантажень на чистому JS

***
Наймасштабніша зустріч української IT-спільноти: понад 2500 учасників, 120+ спікерів, більше 30 партнерів. На вас чекають доповіді, панельні дискусії, воркшопи в семи треках — від архітектури та розробки до AI, тестування та продакт-стратегій.

Будуть нові треки, секретні зони, круглі столи, афтепаті та інтерактивні стенди.

Квитки вже у продажу — приєднуйтесь!

DOU Day 2025 — зустрінемось у Києві 16–17 травня!
https://dou.ua/goto/w4iy

---
Знайомтеся з Мейлтрап — українською імейл-платформою, створеною під потреби розробників.

Високі показники доставки, SMTP i API з набором найпопулярніших бібліотек та найкраща в галузі аналітика.

Скористайтесь промокодом BABICH і отримайте знижку 20% на усі тарифні плани Мейлтрап: https://l.rw.rw/serhii_babich_3

***
А також не забудьте дати відповідь на Питання від партнера та отримати нагоду виграти мишку MX Anywhere 3 від Logitech!

А ви знаєте, що в CSS існує можливість вибрати і стилізувати порожній елемент? Я теж колись не знав. Ба більше — вважав, що це щось із майбутнього, де існує тільки CSS3. Насправді ця можливість із нами ще з часів CSS2.1 — просто якось тиха і непомітна, без гучних анонсів і трендових статей.

Цікавий факт: CSS2.1 став стандартом у 2011 році — того самого року, коли я розпочав свою карʼєру у веброзробці.

Псевдоклас :empty працює дуже просто: він вибирає елементи, у яких немає жодного вмісту — ні тексту, ні дочірніх елементів. Абсолютна порожнеча. І це справді може бути корисним: наприклад, щоб приховати порожні картки або підсвітити розмітку, яку випадково залишили пустою.

Єдине, що треба пам’ятати: навіть один пробіл, перенос рядка чи непомітний   уже робить елемент непорожнім. :empty спрацьовує тільки тоді, коли в DOM буквально нічого немає.

section:empty {
  outline: 2px dashed red;
}

section:empty::before {
  content: "Тут мало би бути щось важливе.";
  color: crimson;
}

MDN

@babichdev

Зайшло? Лайк, збереження та поширення — найкращі відповіді, чи варто продовжувати.

Коментарі вбивають ютуб. Точніше — їхня відсутність. Точніше — не весь ютуб, а мій канал конкретно.

У ютуба взагалі цікаве уявлення про те, що кому рекомендувати, і активність під відео — не останній в тому фактор. Чим вона менша, тим відео "нецікавіше", і тим швидше ютуб кладе на нього алгоритмічний пісюн.

Тому я дуже-дуже-дуже сильно попрошу вас залишити коментар з відгуком про учорашній лайвкодинг, а якщо ви його ще не переглянули, то це варто неодмінно зробити. І залишити коментар.

Обіцяю відповісти на усі ваші відгуки!

https://youtube.com/live/DNOe80KVurI

P.S. В описі під відео вже є посилання на репозиторій!

#цього_тижня
Глянули одним оком на @layer і поговорили про порядок застосування стилів.

Дізналися, як не писати padding-left і padding-right за допомогою CSS Logical Properties.

Розглянули, як стилізувати батьківські елементи за допомогою :has та без допомоги JavaScript.

Згадали про :empty та дізналися як вибирати справді порожні елементи.

А ще дивилися прямий етер з лайвкодингом, на якому разом з гостем робили менеджер завантажень на чистому JS.

Підписуйся: @babichdev

***
Усім гарних вихідних та смачної паски! Зустрінемось після свят!

Чи доводилось вам коли-небудь відчайдушно хотіти, аби в природі існував querySelector "навпаки"? А для пошуку потрібного батька не треба було б робити нескінченні while { el.parentElement… }?

Якщо я вам скажу, що таке уже дуже давно існує?

closest() — це метод DOM API, який дозволяє знайти найближчий елемент-предок (або сам елемент), що відповідає заданому CSS-селектору. Він перевіряє спочатку сам елемент, потім піднімається до батька, і так далі догори по DOM-ієрархії до кореня документа.

Якщо елемент знайдено — повертається він. Якщо ні — null.

Ось таким чином можна впевнено ловити клік саме на потрібному елементі, навіть якщо фактично ми клікали десь на його дочірні елементи:

container.addEventListener('click', (event) => {
  const item = event.target.closest('.list-item');
  if (item) {
    item.classList.toggle('selected');
  }
});

Найчастіше closest() допомагає при делегуванні подій через контейнери, при роботі з вкладеними елементами або ж коли потрібно визначити належність елемента до певного блоку.

Цікаво? Постав серденько та пошир цей допис серед друзів. Це дуже цінно для ровитку каналу.

Важливі нюанси:
• Якщо сам елемент підходить — він і повертається.
• Пошук тільки догори (не вниз).
• Якщо немає збігів — повертається null.
• Працює тільки для елементів, що фактично знаходяться в DOM.

Трохи історії: ідея closest() давно використовувалась, до прикладу, у jQuery (версія 1.3, ~2009 рік). Метод $(el).closest(selector) працював за тією ж логікою: спочатку елемент, потім його батьки. У бравзерах closest() зʼявився в стандарті Selectors API Level 2 і підтримується скрізь із 2015 року.

Тож сьогодні це надійний і швидкий спосіб шукати потрібний контекст без зайвого перебору руками.

А ви як, користуєтесь closest, чи досі перебираєте усіх батьків руками? Напишіть обовʼязково в коментарях!

MDN

@babichdev

На полі — заміна! Ну або не на полі, а в DOMі. У будь-якому разі іноді виникає потреба замінити один елемент у DOM на інший — не змінити його вміст, не оновити клас, а саме повністю підмінити.

Поширеним, так би мовити "bulletproof" підходом уже тривалий час є використання методу replaceChild у батьківського елемента:

parent.replaceChild(child, newChild);

Сьогодні ж є куди краший спосіб — replaceWith. Це метод, який викликається напряму на елементі й дозволяє одразу вказати, чим його потрібно замінити:

child.replaceWith(newChild);

Метод працює і для вставки кількох елементів одночасно, наприклад:

child.replaceWith(newChild1, newChild2);

Або навіть просто тексту:

child.replaceWith('Привіт!');

Головне — памʼятати, що replaceWith() видаляє елемент, на якому викликається, і вставляє на його місце все, що передано в аргументах. Якщо цей елемент ще не в DOM — метод не має жодного ефекту.

Використовується він у всіх основних браузерах ще з 2019 року й входить у Baseline, працює стабільно, читається просто. Якщо ви ще досі видаляєте елементи вручну й потім вставляєте нові — спробуйте replaceWith.

До речі, вам уже випадала нагода використати replaceWith у себе, чи ще тримаєтесь за remove і append? Напишіть у коментарях.

Корисно? Цікаво? З вас вподобайка і репост.

MDN

@babichdev

#кандидат_vs_співбесіда
Відповідаєте правильно, але співбесіда все одно неуспішна? Давайте поставлю просте питання: а ви взагалі розмовляєте з інтервʼюєром?

Найпоширеніша помилка — відповідати, як на іспиті. Суха академічна відповідь, без уточнень, контексту чи емоцій. Наче говорить автоматичний перекладач, а не жива людина.

Однак співбесіда — це не інтелектуальний конкурс. Це розмова. Бесіда. Розробники на реальних проєктах обговорюють задачі, уточнюють вимоги, дискутують про підходи. Навіть початківці не мають сидіти мовчки в куточку.

А аби не довелося мовчки в куточку зі сльозами на щоках сидіти мені — постав вподобайку та пошир цей допис. Дякую.

Як і на співбесіді. Якщо вас питають, до прикладу, що б ви використали для такого чи такого лейауту, відповідь «флекс» чи «ґрід» буде абсолютно недостатньою. Варто пояснити, чому саме ви обрали таку відповідь, що вплинуло на ваше рішення. В ідеалі — добре було б зачепити й інші аспекти. Наприклад, пояснюючи вибір флекса, одразу додати, чому не ґрід.

Такий підхід показує не лише знання, а й практичне мислення. Інтервʼюєр чує від вас не сухе визначення терміну, а ваш особистий підхід до задач.

Найкраща відповідь — не ідеальна, а жива, з досвіду та розуміння. Ваша задача — не поставити крапку на початку, а пройтися стежкою думок. Уміння озвучувати свої рішення — одна з найсильніших навичок на співбесіді. Це показує не лише результат, а й шлях до нього. А шлях дуже важливий, адже завтра ви разом будете шукати баг.

Шукають не ідеальних — шукають мислячих.

@babichdev

Хто хоче стати зіркою наступної співбесіди на ютубі? Мерщій подавайте заявки, адже етер планується уже на наступний четвер, 1 травня!

Фронтенд, фулстек, бекенд? Джуни, мідли, синйьори? Радо розгляну усі заявки, і разом з моїм поки що таємним експертом з Brainstack оберемо наступного учасника співбесіди на каналі "Сергій Бабіч та Дивовижний світ веброзробки".

І покваптеся, форма буде відкритою лише добу, до 19:00 завтрашнього дня.

Не проґавте нагоди потрапити в тілівізор! )

ПОДАТИ ЗАЯВКУ НА УЧАСТЬ В ОНЛАЙН-СПІВБЕСІДІ

@babichdev

#раджу почитати
Чи може однопотоковий JavaScript готувати піцу та приймати нові замовлення одночасно? Алла Капля, Backend-розробниця у Weblium, розбирає Promise на живому прикладі піцерії: чому без асинхронности нікуди, як вийгло так, що обіцянки в JS є, а от пробачень нема, та що приховано за кулісами then(), catch() і finally().

Готові поглибити свої знання для наступного інтерв’ю чи реального проєкту? У статті дізнаєтеся, як уникнути callback-хаосу, як працюють стани pending→fulfilled→rejected та де сховались найпоширеніші підводні камені. Цікаво? Тоді запрошую вас до прочитання статті про погляд на Promise очима джуніорки!

З вас — обовʼязкове прочитання статті, вподобайка та коментар під матеріалом!

https://dou.ua/forums/topic/53242

@babichdev

#цього_тижня ми з вами:

В понеділок навчилися швидко й просто знаходити потрібний батьківський елемент за допомогою Element.closest.

У вівторок дізналися, як підміняти DOM елемент іншим елементом, або й багатьма елементами одним махом, використовуючи Element.replaceWith.

В четвер розбиралися, як не треба відповідати на співбесіді, а головне — як треба.

У пʼятницю читали разом статтю від Алли Каплі про Promise.

Підписуйся: @babichdev

***
Гарних вам вихідних, та до наступної зустрічі!

Несподівано — нове відео на каналі!

Під час нещодавнього закритого стриму "Для своїх" трошки поділився думками про вайбкодинг, досвід з Cursor на роботі й не тільки, і про те, яку рутину я вже не уявляю писати власноруч.

З вас перегляд, вподобайки і обов'язковий коментар!

https://youtu.be/tGzJI1tpkPQ

@babichdev

.