Створення власних кастомних селекторів CSS з використанням :is() та :where()

CSS селектори є ключовими інструментами для стилізації веб-сторінок. З часом з’являються нові можливості для спрощення та оптимізації коду. Одними з таких інновацій є псевдокласи :is() та :where(), які дозволяють створювати кастомні селектори CSS з більшою ефективністю.

Переваги використання :is() та :where()

Інколи створення CSS-селекторів стає складним завданням, особливо коли йдеться про складні структури. :is() та :where() надають можливість спростити цей процес. Вони дозволяють об’єднати декілька селекторів в один, мінімізуючи дублювання коду та покращуючи читабельність.

Застосування псевдокласу :is()

:is() стає у нагоді, коли потрібно застосувати однакові стилі до різних елементів. Наприклад, якщо Ви хочете задати один і той самий стиль для різних заголовків, використання :is() значно спростить задачу:

:is(h1, h2, h3) {
  color: #333;
  font-family: 'Arial', sans-serif;
}

Цей код означає, що всі заголовки h1, h2 та h3 отримають однакові стилі. Це не тільки заощаджує час, але й робить CSS-код чистішим.

Особливості псевдокласу :where()

:where() працює схожим чином до :is(), але має одну значну відмінність — специфічність. Стилі, задані через :where(), мають специфічність, рівну нулю, що дозволяє легше перекривати їх іншими стилями.

:where(nav, footer) {
  margin: 0;
  padding: 0;
}

У цьому прикладі, всі елементи <nav> та <footer> отримають нульові відступи. Якщо пізніше Ви захочете додати специфічніші стилі для цих елементів, це можна легко зробити без ризику конфліктів.

Коли використовувати :is() та :where()

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

Реальні приклади застосування

Уявімо, що Ви працюєте над великим проєктом, де потрібно стилізувати безліч елементів залежно від їх типу. Замість того, щоб писати величезний листинг CSS-коду, можна скористатися :is() та :where() для зменшення розміру та підвищення ефективності стилів.

:is(article, aside, section) p {
  line-height: 1.6;
  margin-bottom: 1em;
}

:where(.btn-primary, .btn-secondary) {
  padding: 10px 20px;
  border-radius: 5px;
}

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

Використання :is() та :where() у CSS відкриває нові горизонти для оптимізації стилів та підвищення ефективності коду. Ці псевдокласи допомагають створювати більш прості та гнучкі рішення, що покращує досвід розробки та підтримки веб-сторінок.

Twitter  Facebook  LinkedIn  Reddit  Email