Как попадают стили из одного компонента в другой без Scope?

CSS Cascade и наследование

В браузере стили из одного компонента распространяются на другие через каскадность CSS и наследование. Это происходит несколькими способами.

1. Глобальные стили

// ПЛОХО: Глобальные стили влияют везде
// styles/global.css
button {
  background-color: blue;
  color: white;
  padding: 10px;
}

// Все кнопки на странице станут синими, даже в других компонентах

// ХОРОШО: Специфичные селекторы
.primary-button {
  background-color: blue;
  color: white;
}

// Или используешь класс компонента
.Button__root {
  background-color: blue;
}

2. Наследование

// Стили наследуются от родителя к потомку
<div style={{ fontSize: '16px', color: 'red' }}>
  Parent
  <div>
    Child (тоже будет красным и размером 16px)
  </div>
</div>

// Наследуемые свойства:
// color, font-size, font-family, line-height, text-align, и т.д.

// НЕ наследуемые:
// width, height, margin, padding, border, background

3. CSS-in-JS (эмуляция Scope)

// ПЛОХО: Никакого скопирования
const Button = () => (
  <button className="btn">Click</button>
);

// ХОРОШО: CSS Modules (автоматический Scope)
// Button.module.css
.button {
  background: blue;
}

// Button.tsx
import styles from './Button.module.css';
export const Button = () => (
  <button className={styles.button}>Click</button>
);
// Результат в HTML: class="Button_button__2a3b"
// Классы автоматически уникальны!

4. Tailwind (не требует Scope)

// Tailwind безопасен - классы в стилях, не влияют друг на друга
export function Button() {
  return <button className="bg-blue-500 px-4 py-2">Click</button>;
}

export function Card() {
  return <div className="bg-white p-4 rounded-lg">Content</div>;
}
// Нет конфликтов, каждый класс изолирован

5. BEM (Block Element Modifier)

// Конвенция именования предотвращает конфликты
// ПЛОХО: Общие имена
.card {
  padding: 10px;
}
.title {
  font-size: 20px;
}

// ХОРОШО: BEM подход
.UserCard__root {
  padding: 10px;
}
.UserCard__title {
  font-size: 20px;
}
.UserCard__title--primary {
  font-weight: bold;
}

export function UserCard() {
  return (
    <div className="UserCard__root">
      <h2 className="UserCard__title UserCard__title--primary">
        User Name
      </h2>
    </div>
  );
}

6. Селекторы каскадируются

// Специфичность селекторов важна
// global.css
div {
  color: red;
}

// component.css
.MyComponent {
  color: blue;
}

<div class="MyComponent">Text</div>
// Будет синий, так как .MyComponent специфичнее, чем div

// Проблема: !important переопределяет всё
.MyComponent {
  color: red !important;
}
// Очень плохо - сложно переопределить

7. Как стили просачиваются

// Сценарий: стили из Parent влияют на Child
// ParentComponent.css
.parent-component {
  font-size: 16px;
  color: red;
}

// ChildComponent.tsx
export function ChildComponent() {
  return (
    <div className="child-component">
      This text will be red and 16px!
    </div>
  );
}

// App.tsx
export function App() {
  return (
    <div className="parent-component">
      <ChildComponent />
    </div>
  );
}
// font-size и color наследуются от parent

8. Shadow DOM (полная изоляция)

// Web Components имеют полную изоляцию
class MyComponent extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
      }
      button {
        background: blue;
      }
    `;
    
    const button = document.createElement('button');
    button.textContent = 'Click';
    
    shadow.appendChild(style);
    shadow.appendChild(button);
  }
}

// Стили внутри Shadow DOM не влияют на외부
customElements.define('my-component', MyComponent);

9. Как избежать просачивания

// 1. Используй CSS Modules
import styles from './Button.module.css';
export function Button() {
  return <button className={styles.root}>Click</button>;
}

// 2. Используй BEM или похожую конвенцию
export function Button() {
  return <button className="Button__root">Click</button>;
}

// 3. Используй CSS-in-JS библиотеки (styled-components, emotion)
import styled from 'styled-components';
const StyledButton = styled.button`
  background: blue;
  &:hover {
    background: darkblue;
  }
`;
export function Button() {
  return <StyledButton>Click</StyledButton>;
}

// 4. Избегай глобальных селекторов
// ПЛОХО:
button { ... }

// ХОРОШО:
.MyButton { ... }
.MyButton button { ... }

// 5. Используй CSS Custom Properties для контролируемого наследования
:root {
  --primary-color: blue;
  --primary-text-color: white;
}

.Button {
  background: var(--primary-color);
  color: var(--primary-text-color);
}

Лучшие практики

// ИСПОЛЬЗУЙ ЭТО:
// 1. CSS Modules
import styles from './Button.module.css';

// 2. BEM с CSS
.Button__root { }
.Button__text { }

// 3. Tailwind (по умолчанию изолирован)
className="bg-blue-500 text-white"

// 4. Scoped styles в Vue (но в React используй CSS Modules)
<style scoped>
  .button { }
</style>

Ответ: стили распространяются через наследование CSS и глобальные селекторы. Используй CSS Modules, BEM или Tailwind для изоляции стилей компонентов.