Современный CSS: Grid, Flexbox, анимации и Tailwind

Эволюция CSS

CSS прошёл долгий путь от простых стилей до мощной системы вёрстки. Современный CSS включает Grid, Flexbox, переменные, анимации и многое другое. В этой статье разберём ключевые техники.

CSS Grid — двумерная вёрстка

Grid — система для создания сложных двумерных макетов:

/* Базовый Grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

/* Именованные области */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Адаптивный Grid без медиа-запросов */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

Flexbox — одномерная вёрстка

Flexbox идеален для выравнивания элементов в одном направлении:

/* Центрирование */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Навигация */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Карточка с footer внизу */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-content {
  flex: 1; /* Занимает всё доступное пространство */
}

.card-footer {
  margin-top: auto; /* Прижимается к низу */
}

CSS переменные (Custom Properties)

:root {
  /* Цвета */
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  
  /* Размеры */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* Типографика */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Тени */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Тёмная тема */
[data-theme="dark"] {
  --color-text: #f9fafb;
  --color-text-muted: #9ca3af;
}

/* Использование */
.button {
  background: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-md);
}

.button:hover {
  background: var(--color-primary-dark);
}

CSS анимации

/* Transition для интерактивности */
.button {
  transition: all 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Keyframe анимации */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* Stagger анимация для списков */
.list-item {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0.1s; }
.list-item:nth-child(2) { animation-delay: 0.2s; }
.list-item:nth-child(3) { animation-delay: 0.3s; }

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Tailwind CSS

Tailwind — utility-first CSS фреймворк для быстрой разработки:

// Компонент с Tailwind
function Card({ title, description, image }) {
  return (
    <div className="
      bg-white rounded-2xl shadow-lg overflow-hidden
      transition-all duration-300 hover:shadow-xl hover:-translate-y-1
    ">
      <img 
        src={image} 
        alt={title}
        className="w-full h-48 object-cover"
      />
      <div className="p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-2">
          {title}
        </h3>
        <p className="text-gray-600 line-clamp-3">
          {description}
        </p>
      </div>
    </div>
  );
}

// Адаптивный дизайн
<div className="
  grid 
  grid-cols-1 
  sm:grid-cols-2 
  lg:grid-cols-3 
  xl:grid-cols-4 
  gap-6
">

Методология BEM

BEM (Block Element Modifier) — методология именования CSS классов:

/* Block */
.card { }

/* Element */
.card__title { }
.card__image { }
.card__content { }

/* Modifier */
.card--featured { }
.card--compact { }
.card__title--large { }

/* Пример */
.button { 
  padding: 12px 24px;
  border-radius: 8px;
}

.button--primary {
  background: var(--color-primary);
  color: white;
}

.button--secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
}

.button--large {
  padding: 16px 32px;
  font-size: 1.125rem;
}

SCSS препроцессор

// Переменные и миксины
$primary: #6366f1;
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// Использование
.container {
  padding: 1rem;
  
  @include respond-to(md) {
    padding: 2rem;
  }
  
  @include respond-to(lg) {
    max-width: 1200px;
    margin: 0 auto;
  }
}

// Вложенность
.card {
  background: white;
  
  &__title {
    font-size: 1.5rem;
  }
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  &--featured {
    border: 2px solid $primary;
  }
}

Заключение

Современный CSS предоставляет мощные инструменты для создания сложных интерфейсов. Grid и Flexbox решают большинство задач вёрстки, переменные обеспечивают консистентность, а Tailwind ускоряет разработку.

Изучите нативный CSS перед фреймворками. Понимание основ поможет эффективнее использовать любые инструменты.