Современный CSS: полный обзор

/* Разметка: <section class="cards"> <article class="card"> <img> <div>…</div> </article> </section> */

/* Секция становится контейнером: карточки внутри меряют её ширину */
.cards {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

/* Карточка подстраивается под место, куда её поставили, а не под экран:
   в широкой колонке картинка слева, в узкой боковой — сверху */
@container (width > 28rem) {
  .card {
    grid-template-columns: 10rem 1fr;
    align-items: start;
  }
}

/* Поле реагирует на то, что в него ввели, — без JavaScript */
.field:has(input:user-invalid) {
  --field-color: oklch(55% 0.2 25);
}
.field label,
.field .hint {
  color: var(--field-color, inherit);
}
.field input {
  border: 1px solid var(--field-color, #cfd1cf);
}

/* Карточка с картинкой получает две колонки, без картинки — остаётся в одну */
.card:has(> img) {
  grid-template-columns: 8rem 1fr;
}

/* Пока открыт диалог, страница под ним не прокручивается */
html:has(dialog[open]) {
  overflow: hidden;
}

/* Карточки в ряд: заголовки, тексты и кнопки выравниваются между карточками,
   какой бы длины ни был текст в каждой */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 3;              /* заголовок, текст, кнопка */
  grid-template-rows: subgrid;   /* строки общие с соседями */
  gap: 0.75rem;
}

/* Порядок слоёв объявляется один раз: более поздний слой побеждает
   независимо от веса селектора — !important не нужен */
@layer reset, tokens, components, utilities;

@layer tokens {
  :root {
    --ink: oklch(21% 0.006 150);
    /* плавный размер: 16px на телефоне, 20px на широком экране, без медиазапросов */
    --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  }
}

@layer components {
  .button {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    border: 0;
    font-size: var(--text-base);
    background: var(--ink);
    color: white;
    transition: background-color 0.15s;

    /* вложенность без Sass */
    &:hover {
      background: color-mix(in oklab, var(--ink) 80%, white);
    }
    &:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
  }
}

@layer utilities {
  .hidden {
    display: none;
  }
}