Методи ізоляції стилів у CSS
Що таке ізоляція стилів?
Ізоляція стилів — це підхід до написання CSS, при якому стилі одного компонент не впливають на інші частини програми. Це важливо для:
- запобігання конфліктам стилів;
- спрощення масштабованості коду;
- повторного використання компонентів без побічних ефектів.
Методи ізоляції стилів
BEM (Block Element Modifier)
Методологія іменування класів, що забезпечує унікальність та передбачуваність стилів.
css
/* BEM стиль */
.button {}
.button__icon {}
.button--primary {}- Імена класів описують ієрархію компонентів.
- Працює в будь-якому CSS, без інструментів.
CSS Modules
Файли .module.css (або .module.scss), що використовуються в React/Vue/тощо, забезпечують автоматичну локалізацію класів.
jsx
import styles from './Button.module.css';
function Button() {
return <button className={styles.primary}>Click</button>;
}- Класи трансформуються в унікальні.
- Немає перетинів між компонентми.
Shadow DOM (Web Components)
Ізоляція на рівні браузера — створює "тіньову" область DOM, приховану від зовнішніх стилів.
javascript
const shadow = element.attachShadow({ mode: "open" });
shadow.innerHTML = `<style>p { color: red; }</style><p>Hello</p>`;- Повна ізоляція.
- Стилі не просочуються всередину чи назовні.
- Потребує підтримки Web Components.
CSS-in-JS
Стилі пишуться безпосередньо в JavaScript за допомогою бібліотек:
- Styled-components
- Emotion
- Stitches
- Vanilla Extract
jsx
import styled from 'styled-components';
const Button = styled.button`
color: white;
background: blue;
`;Atomic CSS (Utility-first)
Використання класів з конкретними значеннями (Tailwind CSS).
html
<button class="bg-blue-500 text-white px-4 py-2">Click</button>Рекомендація:
Вибирайте метод ізоляції залежно від масштабу проекту та вподобань команди.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.