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

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

Это пример кейса из моего чеклиста "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.

Где расположен псевдо-элемент ::before?

.parent {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}
.parent::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
}

По оси X псевдо-элемент ::before будет в центре, потому что применен place-items: center. По оси Y прижат к верхней границе родителя, потому что свойство top имеет больший приоритет, чем place-items.

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

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

Что я советую посмотреть из моего контента:

1. Вы не знаете CSS
Мой список вопросов, позволяющий найти слабые места в знаниях.

2. Готовимся к вопросам по вёрстке на интервью Frontend-разработчика
Отвечаю на самые популярные вопросы о CSS на интервью фронтендера.

3. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Рассказываю об ошибках в верстке, которые влияют на цифровую доступность.

4. Живые шпаргалки для свойств display и position
Шпаргалки на Codepen, показывающие множество неизвестных нюансов свойств. Можно потыкать и изучить.

5. Код компонента Timeline
Как написать CSS для компонента? На этот вопрос можно найти ответ в этой демке. Правда, придется покапаться в коде.

6. Анимашки и CSS творчество
UI Анимации, CSS арт и готовые визуальные решения.

7. Пример организации CSS
Правила и подходы, проверенные мной. Обратите внимание на названия классов, использование компонентов, кастомизацию, комментирование.

Какое вычисленное значение у свойства width?

.parent {
  display: flex;
}
.parent::before {
  content: "";
  position: absolute;
  width: 1rem;
  flex-basis: 2rem;
}

flex-basis перестает работать после применения к элементу position: absolute или fixed, поскольку он находится вне flex контекста. Правильный ответ — 1rem

В следущем примере псевдо-элемент скрыт позади родителя. Как сделать, чтобы он отображался перед ним, но позади контента?

<div class="parent">здесь контент</div>

.parent {
  width: 100%;
  height: 100dvh;
  background-color: red;
  position: relative;
}
.parent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: green;
}

Все дочерние элементы с отрицательным z-index будут скрыты любым родительским элементом, у которого установлено background-color. Но isolation: isolate останавливает это. Просто добавьте его к родительскому элементу, и элементы с отрицательным z-index начнут позиционироваться от него.