Начинающие и опытные разработчики зачастую допускают одни и те же ошибки при написание CSS. Сегодня, мы рассмотрим, как можно оптимизировать CSS код.
1. Не перезаписывайте padding или margin
Разработчики часто устанавливают padding или margin для всех элементов, а затем сбрасывают их для первого или последнего элемента. Однако, зачем использовать два правила, когда вы можете обойтись одним. Гораздо проще установить поля и отступы для всех необходимых элементов сразу.
Используйте один из следующих вариантов для более простого и лаконичного CSS: селекторы nth-child/nth-of-type, псевдокласс :not() или смежный комбинатор, более известный как +.
Не делайте так:
Делайте так:
Или
Или
2. Не добавляйте display: block для элементов с position: absolute или position: fixed
Знаете ли вы, что вам не нужно добавлять свойство display: block для элементов с position: absolute или position: fixed, так как это происходит по умолчанию?
Кроме того, если вы используете значения inline-*, они изменятся следующим образом: inline или inline-block изменятся на block, inline-flex -> flex, inline-grid -> grid и inline-table -> table.
Таким образом, вы можете просто написать position: absolute или position: fixed. Добавляйте свойство display только тогда, когда вам нужны значения flex, table или grid.
Не делайте так:
Или
Делайте так:
Или
3. Не используйте transform: translate (-50%, -50%) для центрирования
Раньше была популярная проблема с центрированием элемента произвольной высоты по двум осям.
В частности, одним из решений было использование комбинации абсолютного позиционирования и свойства transform. Этот метод вызвал проблемы с отображением текста в браузерах на базе Chromium. Он становился размытым.
Но после внедрения flexbox этот способ уже не актуален. Дело в том, что он не может решить проблему размытого текста. Более того, вам приходится использовать пять свойств.
Вместо этого, мы можем использовать margin: auto внутри контейнера flex, и браузер будет центрировать элемент. Всего два свойства, и все.
Не делайте так:
Делайте так:
4. Не используйте width: 100% для блочных элементов
Мы часто используем flexbox для создания многоколоночной сетки, которая в зависимости от размера экрана может преобразовываться в один столбец.
И чтобы преобразовать сетку в один столбец, разработчики используют width: 100%. Однако, элементы сетки - это блочные элементы, которые могут делать это по умолчанию без использования дополнительных свойств.
Поэтому нам не нужно использовать width: 100%. Единственное, что мы должны написать, так это медиа-запрос таким образом, чтобы flexbox использовался только для создания сетки с несколькими столбцами.
Например, у нас есть следующий HTML код:
Не делайте так:
Делайте так:
5. Не устанавливайте display: block для гибких элементов
При использовании flexbox важно помнить, что при создании контейнера flex (display: flex) все дочерние элементы становятся блочными.
Это означает, что элементы могут иметь только блочные значения. Соответственно, если вы установите inline или inline-block, он изменится на block, inline-flex -> flex, inline-grid -> grid и inline-table -> table.
Поэтому не добавляйте display: block к элементам flex. Браузер сделает это за вас.
Не делайте так:
Делайте так:
Итого
Надеюсь, мне удалось показать вам, как избежать простых ошибок, и вы последуете моему совету. Спасибо за чтение!