Бытует мнение, что CSS сложный. Существует много костылей, магии. Легко выстрелить себе в колено. Меня это печалит, потому что я так не считаю. Немного подумав, что можно сделать, я собрал 5 привычек разработчиков, которые мне не нравятся, и показал, как их избежать.
Устанавливать отступы, а потом сбрасывать их
Часто встречаю, что люди устанавливают отступы (margin или padding) для всех элементов, а потом сбрасывают у первого или последнего элемента. Не понимаю зачем писать два правила, когда можно обойтись одним. Проще же сразу установить отступ для нужных элементов.
Используйте один из следующих вариантов: nth-child/nth-of-type селекторы, псевдо-класс :not(), или комбинатор следующего соседнего элемента, более известный как +, и ваш CSS будет более простым и кратким.
Не делайте так
.item { margin-right: 1rem;}.item:last-child { margin-right: 0;}
Вы можете использовать
.item:not(:last-child) { margin-right: 1rem;}/*или*/.item:nth-child(n+2) { margin-left: 1rem;}/*или*/.item + .item { margin-left: 1rem;}
Добавлять display: block для элементов с position: absolute или position: fixed
А знаете ли вы, что вам не нужно добавлять display: block для элементов c position: absolute или position: fixed, потому что это происходит по умолчанию?
Кроме того, если вы будете использовать inline-* значения, то они будут изменены следующим образом: inline или inline-block изменятся на block, inline-flex -> flex, inline-grid -> grid, и inline-table -> table.
Поэтому просто пишите position: absolute или position: fixed, и добавляйте display, только тогда, когда вам нужны значения flex или grid.
Не делайте так
.button::before { content: ""; display: block; position: absolute;}/*или*/.button::before { content: ""; display: block; position: fixed;}
Вы можете использовать
.button::before { content: ""; position: absolute;}/*или*/.button::before { content: ""; position: fixed;}
Использовать transform: translate(-50%, -50%) для центрирования
Cуществует популярная задача, которая попила не мало крови. Особенно до 2015 года, когда все ее решения приводили к каким-то проблемам. Я говорю о центрировании элемента с произвольной высотой по двум осям.
В частности одним из решений было использовать комбинацию абсолютного позиционирования и свойства transform. Данный прием приводил к размытию текста в Chromium браузерах.
Но после появления flexbox этот прием, по моему мнению, не актуален. Мало того, что проблема размытия текста еще не решена, так еще нужно использовать 5 свойств. Поэтому я хочу поделиться приемом, который сократит код до 2 свойств.
Мы можем использовать margin: auto внутри flex-контейнера, и браузер расположит элемент по центру. Просто 2 свойства и все.
Не делайте так
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
Вы можете использовать
.parent { display: flex;}.child { margin: auto;}
Можно использовать justify-content и align-items для этой задачи, но я не люблю этот прием, потому что существуют проблемы, к которым он приводит. О них я расскажу в отдельной статье.
Использовать width: 100% для блочных элементов
Мы часто используем flexbox для создания многоколоночной сетки, которая постепенно преобразовывается в одну колонку.
И чтобы преобразовать сетку в одну колонку разработчики использую width: 100%. Я не понимаю, зачем они это делают. Ведь элементы сетки являются блочными элементами, которые делают это по умолчанию без дополнительных свойств.
Соответственно нам не нужно использовать width: 100%, а следует написать медиа-запрос так, чтобы flexbox использовался только для создания многоколоночной сетки.
Не делайте так
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div></div>
.parent { display: flex; flex-wrap: wrap;}.child { width: 100%;}@media (min-width: 1024px) { .child { width: 25%; }}
Вы можете использовать
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div></div>
@media (min-width: 1024px) { .parent { display: flex; flex-wrap: wrap; } .child { width: 25%; }}
Если вы знаете, почему нужно добавлять width:100% и мой способ не решает проблему, то напишите об этом в комментариях. Возможно, я что-то не учел. Спасибо
Задавать display: block для flex-элементов
При использовании flexbox важно помнить, что при создании flex-контейнера (добавляем display: flex), все дочерние элементы (flex-элементы) становятся blockified.
Это означает, что у элементов устанавливается свойство display, и у него могут быть только блочные значения. Соответственно, если установить inline или inline-block, то оно изменится на block, inline-flex -> flex, inline-grid -> grid и inline-table -> table.
Поэтому не добавляйте display: block к flex-элементам. Браузер сделает это сам.
Не делайте так
.parent { display: flex;}.child { display: block;}
Вы можете использовать
.parent { display: flex;}
Заключение
Надеюсь мне удалось, показать, как можно избежать простых ошибок, и вы воспользуйтесь моими советами. Если нет, то это будет на вашей совести!
P.S: Если у вас есть вопросы по CSS/HTML, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.
