Больше не нужно использовать 0 для margin и padding

Кто-то сделал так

.container {
  padding: 1rem 0 1.5rem;
  margin: 0 1rem 0 1.5rem;
}

Я предлагаю делать так

.container {
  padding-block: 1rem 1.5rem;
  margin-inline: 1.5rem 1rem;
}

Всегда бесило писать 0 для установки отступа у противоположных сторон. Сегодня это в прошлом, благодаря свойствам margin-block, margin-inline, padding-block, padding-inline.

У меня есть программа менторства.
— Помогаю подружиться с CSS, если для вас он непонятная херня;
— Подготавливаю вас к вопросам по CSS так, что будете знать больше, чем интервьюер на собеседовании;
— Проведу код-ревью и покажу, где сделано так себе;
— Иногда берусь реализовывать ваши идеи.

Платить нужно дохера. Без результата не уйдете. Если случится так, что не смогу помочь, деньги верну. Пишите @melnik909

scroll-behavior: smooth может привести к головокружению или головной боли

Кто-то сделал так

html {
  scroll-behavior: smooth;
}

Я предлагаю делать так

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Пожалуйста, обверните scroll-behavior: smooth медиа-функцией prefers-reduced-motion. Это поможет отобразить плавную прокрутку только, если пользователи разрешат ее в настройках операционной системы.

Атрибут hidden устраняет необходимость определять display: none

Кто-то сделал так

.modal {
  display: none;
  padding: 1rem;
  /* остальной CSS */
}
.modal--is-open {
  display: block;
}

Я предлагаю делать так

.modal:not([hidden]) {
  padding: 1rem;
  /* остальной CSS */
}

Не нужно вручную определять display: none у элементов, изменяющие свою видимость. Просто добавьте атрибут hidden к элементу и определите весь CSS с помощью :not([hidden]).

Надеюсь у вас их нет

https://habr.com/ru/companies/ruvds/articles/917204/

Завязывайте с resize: none

Кто-то сделал так

.textarea {
  resize: none;
}

Я предлагаю делать так

.textarea {
  resize: vertical;
  min-height: 5rem;
  max-height: 15rem;
}

Привычное решение использовать resize: none. Только есть проблема. Обычно целый геморой заполнять такие текстовые области. Можно же разрешить ее изменение только по вертикали в заданном диапазоне.

Обезопасьте анимацию движения медиа-функцией prefers-reduced-motion

Кто-то сделал так

.container {
  animation: zoomIn 1s ease-out alternate infinite both;
}

@keyframes zoomIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

Я предлагаю делать так

@media (prefers-reduced-motion: no-preference) {

  .container {
    animation: zoomIn 1s ease-out alternate infinite both;
  }

  @keyframes zoomIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
  }
}

Как же достала анимация движения. Смотрю на нее, и голова кружится. Когда уже будут использовать медиа-функцию prefers-reduced-motion? Она поможет мне, потому что я запретил анимацию в настройках операционной системы.

Почему :not(class) полезен?

Кто-то сделал так

ul {
  margin-top: 1rem;
}
.list {
  margin-top: 0;
}

Я предлагаю делать так

ul:not([class]) {
  margin-top: 1rem;
}

Как вы определяете основные стили типографики? Если вы задаете стили с помощью селектора типа и сбрасываете их с помощью класса, я предложу сделать это без сброса. Просто используйте :not([class])!

background-color не позволяет контролам сливаться с белым экраном

Кто-то сделал так

.hero {
  background-image: url("hero.jpg");
}

Я предлагаю делать так

.hero {
  background-image: url("hero.jpg");
  background-color: #ff6347;
}

Контролы сливаются с белым экраном пока идет загрузка изображения. Почему бы вам не показать мне их? Тем более это легко. Добавьте background-color, а я не буду ждать загрузки изображений!

Добавьте background-color, если используется фоновое изображение

Кто-то сделал так

.page {
  color: #fefefe;
}

.page__some-way {
  background-repeat: no-repeat;
  background-size: cover;  
  background-image: url("profile-bg.svg");
}

Проблема: Пока фоновое изображение не загрузилось, контент элемента может сливаться с фоном страницы и быть незаметным. Вы увидите белый текст на белом фоне.

Я предлагаю делать так

.page {
  color: #fefefe;
}

.page__some-way {
  background-repeat: no-repeat;
  background-size: cover;  
  background-image: url("profile-bg.svg");
  background-color: #222;
}

Решение: Я добавил контрастный цвет к фону с помощью свойства background-color. Теперь контент не может слиться с фоном страницы.

Демо: https://codepen.io/ (тут будет ссылка на демо)

Это пример кейса из моего чеклиста "HTML и CSS техники для улучшения UI/UX".

Я собрал 16 кейсов, помогающие пользователям меньше страдать. Техники можно применять на любом стеке и с любым опытом. Я специально не замудривал.

В общем, если вы хотите улучшить UI/UX ваших интерфейсов, напишите мне @melnik909. Отправлю вам чеклист взамен на ваши деньги.

Определяйте только то, что вам нужно определить

Кто-то сделал так

.hero {
  background: #e1bfe9;
  /*
    background-color: #e1bfe9;
    background-image: initial
    background-size: initial
    и оставшиеся background-* свойства
  */
}

Я предлагаю делать так

.hero {
  background-color: #e1bfe9;
}

Есть отличный способ написать масштабируемый CSS. Не определяйте то, что не нужно. Если вам нужно определить цвет фона, сделайте это с помощью background-color, а не с помощью background.

21.07.2025 закроется доступ к каналу. Вы можете продолжить читать контент. Для этого купите доступ к закрытой части канала, где есть неопубликованный контент.

Пожалуйста, напишите мне @melnik909. Я расскажу, как оплатить.

display: block не нужен для ::before или ::after внутри элемента с display: grid

Кто-то сделал так

.parent {
  display: grid /* или inline-grid */
}
.parent::before {
  content: "";
  display: block;
}

Я предлагаю делать так

.parent {
  display: grid /* или inline-grid */
}
.parent::before {
  content: "";
}

Вы привыкли определять display: block для ::before или ::after? Друзья, нет необходимости делать так, если вы определяете display: grid или display: inline-grid для родительского элемента. Браузеры делают это сами.

У нас пополнение. Пришли новенькие. Спасибо, что вы здесь!

Канал публичный. Каждую среду публикую посты. Но в любой момент может закрыться доступ к нему. Его можно сохранить, поддержав меня деньгами. Так, что не тяните с этим.

Фидбек, критику, похвалу, вопросы и предложения можно писать мне @melnik909. Всех жду!

К слову о поддержке.

Вы сохраните доступ к каналу, купив его закрытую часть, где есть неопубликованный контент. У меня там 55 постов.

Напишите мне @melnik909. Расскажу, как оплатить.

Пришло время использовать новый способ центрирования элементов с position: absolute

Кто-то сделал так

.parent {
  position: relative;
}
.parent::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Я предлагаю делать так

.parent {
  display: grid;
  place-items: center;
}
.parent::before {
  content: "";
  position: absolute;
}

Все еще используете сниппет для центрального элемента с position: absolute с использованием transform(-50%, -50%)? Пришло время использовать новую альтернативу! Познакомьтесь с place-items: center.