Как пишутся inline стили?

Inline Стили в React и Modern Web Development

Inline стили давно эволюционировали из простого HTML. В современной разработке есть несколько подходов, и выбор зависит от контекста.

1. CSS-in-JS Объекты (React)

В React используются объекты JavaScript вместо строк:

const buttonStyle = {
  backgroundColor: "#007bff",
  color: "white",
  padding: "10px 20px",
  border: "none",
  borderRadius: "4px",
  cursor: "pointer",
  fontSize: "14px",
};

function Button() {
  return <button style={buttonStyle}>Click me</button>;
}

Основные отличия от CSS:

• Используются camelCase вместо kebab-case: backgroundColor вместо background-color
• Значения в кавычках (строки или числа)
• Нет селекторов, медиа-запросов и псевдоклассов

2. Dynamic Inline Styles

Для условных стилей:

function Alert({ severity }) {
  const baseStyle = {
    padding: "12px 16px",
    borderRadius: "4px",
    fontSize: "14px",
  };

  const severityStyle = {
    error: {
      backgroundColor: "#fee",
      color: "#c33",
      borderLeft: "4px solid #c33",
    },
    success: {
      backgroundColor: "#efe",
      color: "#3c3",
      borderLeft: "4px solid #3c3",
    },
    warning: {
      backgroundColor: "#fef3cd",
      color: "#856404",
      borderLeft: "4px solid #ffc107",
    },
  };

  return (
    <div style={{ ...baseStyle, ...severityStyle[severity] }}>
      Message here
    </div>
  );
}

3. Tailwind CSS (Рекомендуемый подход)

В современных проектах (PrepBro использует Tailwind v4) предпочитают утилити-классы вместо inline:

function Button({ variant = "primary" }) {
  const baseClasses = "px-4 py-2 rounded-lg font-medium transition";
  const variantClasses = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
  };

  return (
    <button className={`${baseClasses} ${variantClasses[variant]}`}>
      Click me
    </button>
  );
}

Для условных классов используем cn() утилиту:

import { cn } from "@/lib/utils";

function Card({ isHighlighted }) {
  return (
    <div className={cn(
      "p-4 border rounded-lg",
      isHighlighted && "bg-yellow-50 border-yellow-400"
    )}>
      Content
    </div>
  );
}

4. CSS Variables в Inline Стилях

Для динамических значений (цвета, размеры) используем переменные:

function ProgressBar({ percentage }) {
  return (
    <div
      style={{
        width: "100%",
        height: "8px",
        backgroundColor: "#e0e0e0",
        borderRadius: "4px",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          width: `${percentage}%`,
          height: "100%",
          backgroundColor: "#4caf50",
          transition: "width 0.3s ease",
        }}
      />
    </div>
  );
}

5. Когда использовать Inline Стили

Inline стили имеют смысл когда:

• Значение полностью динамическое и не может быть выражено классом
• Компонент самодостаточный и не требует переиспользования стилей
• Это временное решение (должно быть рефакторено в класс)

6. Когда НЕ использовать

• Повторяющиеся стили (выносим в класс или компонент)
• Медиа-запросы и адаптивность (только Tailwind или CSS модули)
• Стилизация состояний (hover, focus, active - используем Tailwind или CSS)
• Сложные селекторы (используем CSS модули)

Best Practices

• Избегаем inline стилей - используем Tailwind или CSS модули
• Если нужны динамические значения, выносим объект в переменную
• Для условных стилей используем функции или объекты с ветвлением
• В сложных компонентах переходим на CSS модули или CSS-in-JS библиотеки

В PrepBro используем Tailwind v4 как основной способ стилизации, inline стили избегаем.