Для чего используется decorator в CSS?

Использование декораторов в CSS

Декораторы в CSS — это в основном концепция из TypeScript/JavaScript, которая применяется в стилизации через фреймворки и препроцессоры. Рассмотрим основные использования.

TypeScript декораторы для стилизации

Декораторы используются для добавления метаданных к классам и свойствам:

// Создание кастомного декоратора для стилизации
function Styled(styles: Record<string, any>) {
  return function <T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
      constructor(...args: any[]) {
        super(...args);
        Object.assign(this, { __styles: styles });
      }
    };
  };
}

// Использование
@Styled({
  backgroundColor: '#fff',
  padding: '16px',
  borderRadius: '8px'
})
class Card {}

CSS Modules (подобие декораторов)

В React часто используется подобный подход через модули:

// Button.module.css
.primary {
  background: blue;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
}

.secondary {
  background: gray;
  color: black;
}

// Button.tsx
import styles from './Button.module.css';

interface ButtonProps {
  variant: 'primary' | 'secondary';
  children: React.ReactNode;
}

function Button({ variant, children }: ButtonProps) {
  return (
    <button className={styles[variant]}>
      {children}
    </button>
  );
}

export default Button;

SCSS/LESS функции как декораторы

Препроцессоры используют миксины (похожие на декораторы):

// Миксин как "декоратор" для стилей
@mixin button-base {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  &:active {
    transform: translateY(0);
  }
}

// Применение миксина
.button-primary {
  @include button-base;
  background-color: #007bff;
  color: white;
}

.button-secondary {
  @include button-base;
  background-color: #6c757d;
  color: white;
}

CSS-in-JS библиотеки (styled-components)

import styled from 'styled-components';

// Создание стилизованного компонента (подобно декоратору)
const StyledButton = styled.button`
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  cursor: pointer;
  font-size: 16px;
  
  &:hover {
    opacity: 0.9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
`;

// Использование
function App() {
  return (
    <>
      <StyledButton primary>Основная кнопка</StyledButton>
      <StyledButton>Вторичная кнопка</StyledButton>
    </>
  );
}

Tailwind CSS (утилитарный подход)

Tailwind похож на декораторы в том, что применяет прединдивидуальные стили:

<!-- Применение "декораторов" через классы -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
  Click me
</button>

<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">
  <!-- Контент -->
</div>

@apply директива в Tailwind (как декоратор)

@layer components {
  @apply — это способ создать переиспользуемые стили
  
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
  }
  
  .card {
    @apply p-4 bg-white rounded-lg shadow;
  }
}

Комбинирование декораторов TypeScript и CSS

// HOC для добавления стилей
function withStyled<P extends object>(
  styles: Record<string, string | number>
) {
  return function <T extends React.ComponentType<P>>(
    Component: T
  ): React.FC<P> {
    return (props: P) => {
      const styleTag = document.createElement('style');
      styleTag.textContent = `
        .${Component.displayName} {
          ${Object.entries(styles)
            .map(([key, value]) => `${key}: ${value};`)
            .join('')}
        }
      `;
      document.head.appendChild(styleTag);

      return <Component {...props} className={Component.displayName} />;
    };
  };
}

// Использование как декоратор
@withStyled({
  backgroundColor: '#fff',
  padding: '16px',
  borderRadius: '8px'
})
class Card extends React.Component {
  render() {
    return <div className="Card">{this.props.children}</div>;
  }
}

Практический пример: система дизайна

// Design System с декораторами
const themeDecorator = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    danger: '#dc3545',
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
  },
  borderRadius: {
    sm: '4px',
    md: '8px',
    lg: '12px',
  },
};

// Применение декоратора в компонентах
const Button = styled.button`
  padding: ${props => props.theme.spacing.md};
  background-color: ${props => props.theme.colors.primary};
  border-radius: ${props => props.theme.borderRadius.md};
  color: white;
  border: none;
  cursor: pointer;
`;

Основные назначения декораторов в CSS

1. Переиспользование стилей — избегать дублирования
2. Инкапсуляция — изоляция стилей компонента
3. Динамическое применение — условные стили
4. Типизация — TypeScript для безопасности стилей
5. Генерация стилей — программное создание CSS
6. Темизация — применение разных тем
7. BEM/OOCSS методологии — организованная архитектура

Вывод

Декораторы в контексте CSS используются для:

• Создания переиспользуемых стилей
• Инкапсуляции компонентов
• Применения динамических стилей
• Организации системы дизайна
• Обеспечения типизации (TypeScript)

Они помогают писать чистый, масштабируемый CSS и улучшают maintainability кода.