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

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

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

.hero { background\-color: \#e1bfe9; }

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

Напоминаю, что можно получить архив со всеми 49 постами (сегодня будет опубликован 22 пост). Плюс ранний доступ к новым.

Напишите мне @melnik909. Продам вам архив.

P.S. Могу ли я зарабатывать такими советами?

? — Да

? — Иди работай уже, код пиши

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

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

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

3. Неизвестно полезный CSS
   Делюсь малоизвестными свойствами и нюансами работы.

4. Магия CSS на практике: советы по вёрстке от гика
   Мои любые подходы и приемы при работе с CSS.

5. Чёрт тебя возьми, CSS
   Объясняю сложные и неочевидные моменты работы CSS.

6. You Should Know CSS — the list of questions to level up your CSS skill
   Мой список вопросов, позволяющий найти слабые места в знаниях.

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

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

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

Незаметные проблемы от counter()

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

.section { counter\-increment: section\-counter; } .section\_\_heading::before { content: "0" counter(section\-counter) "."; color: \#3861cb; font\-size: 2rem; }

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

```
/*

01. О нас

*/

.section__step {
color: #3861cb;
font-size: 2rem;
}
```

Внимание! Пользователи скринридера услышат цифры, которые вы добавляете с помощью counter(). Вы думаете, они полезны? Нет. Они только засоряют озвучку.

У меня подготовлено всего 49 постов. Опубликованы 20. А хотите получить оставшиеся? А еще ранний доступ к новым?

Напишите мне @melnik909. Продам вам архив. Мне же надо зарабатывать...

Как написать CSS в зависимости от количества дочерних элементов

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

.uia\-control { display: inline\-flex; gap: .5rem; /* оставшиеся CSS */ }

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

.uia\-control { display: inline\-flex; /* оставшиеся CSS */ } .uia\-control:has(> :nth\-child(2)) { gap: .5rem; }

Мне всегда приходилось определять gap. Даже если у элемента только один дочерний элемент. Хотя...

Мы можем избежать этого с помощью :has()! Например, я сделал так, что gap применяется, если у uia-control есть минимум 2 дочерних элемента.

Вы упустили этот супер очевидный способ отобразить элементы в столбец

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

.container { display: flex; flex\-direction: column; gap: 1rem; }

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

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

Конечно, когда нужно отобразить элементы в столбец, flex-direction сделает это. Но мне нравится более короткий вариант. Просто использовать display: grid.

Алоха!

Для новеньких. Спасибо, что вы здесь! Тут контент выходит в среду стабильно каждую неделю. Стабильно бешу некоторых опросами, прошу денег и рекламирую себя. Все по классике.

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

Пришел я к вам с рекламой...

Есть несколько способов поддержать меня и этот канал.

1. Купить доступ ко всем советам
Сейчас опубликованы 17 советов из 47. Можно получить оставшиеся и ранний доступ к новым.

2. Заказать консультацию или менторство
Со мной можно развеять синдром самозванца, поняв, что знаете CSS на хорошем уровне. Подготовиться к вопросам по верстке на собеседовании. Увидеть что-то новое для себя.

Пишите мне @melnik909. Я вас жду.