10 приемов CSS, которых следует избегать веб-разработчику!

CSS
10 приемов CSS, которых следует избегать веб-разработчику!

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

1. Установите поля или отступы, а затем сбросьте их.

  • Я часто вижу, как кто-то устанавливает поля или отступы для всех элементов, а затем сбрасывает значение первого или последнего элемента.
.item {
  margin-right: 1.6rem;
}

.item:last-child {
  margin-right: 0;
}
  • Для более простого и чистого CSS используйте один из следующих вариантов: селектор nth-child/nth-of-type, псевдокласс :not() или смежный комбинатор родственных элементов, который, в свою очередь, называется +.
.item:not(:last-child) {
  margin-right: 1.6rem;
}

.item:nth-child(n+2) {
  margin-left: 1.6rem;
}

.item + .item {
  margin-left: 1.6rem;
}

2. Добавьте display:block к элементу с position:absolute/fixed

.button::before {
  content: "";
  position: absolute;
  display: block;
}

.button::before {
  content: "";
  position: fixed;
  display: block;
}

  • вы знаете? когда вы устанавливаете для элементаposition: absoluteилиposition: fixed, по умолчанию естьdisplay: blockЭто свойство!

  • Итак, в этом случае, если вы установитеdisplay:inline-*, будет выполнено следующее преобразованиеinlineилиinline-blockпревратится вblock,inline-flexПеревести вflex,inlone-gridПеревести вgrid,inline-tableПеревести вtable

Мы можем изменить его на это:

.button::before {
  content: "";
  position: absolute;
}

.button::before {
  content: "";
  position: flxed;
}

3. Используйте преобразование: переведите (-50%, -50%) в центр

  • Чтобы центрировать элемент по горизонтали и вертикали, одним из решений является объединениеposition: absoluteи использоватьtransformАтрибуты. Однако этот метод вызвал проблемы с размытием текста в браузерах на основе Chromium.
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  • После введения flexbox я не думаю, что эта техника больше применима. Проблема в том, что это не решает проблему размытого текста.
  • Кроме того, он использует пять свойств. Поэтому я хотел бы поделиться трюком, который сокращает код до двух свойств.
  • мы можем использоватьmargin:autoБраузер автоматически размещается внутри гибкого контейнера и центрирует элемент. Есть только два свойства, вот и все.
.parent {
  display: flex;
}

.child {
  margin: auto;
}

4. Установите ширину: 100 % для блочных элементов.

  • Мы часто используем flexbox для создания сетки из нескольких столбцов, которая постепенно преобразуется в один столбец.

  • Чтобы преобразовать сетку в один столбец, разработчик использует ширину: 100%. Я не понимаю, зачем они это делают. Элементы сетки являются блочными элементами и могут делать это по умолчанию без использования дополнительных свойств.

<div class="parent">
  <div class="child">Item 1</div>
  <div class="child">Item 2</div>
  <div class="child">Item 3</div>
  <div class="child">Item 4</div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

@media (min-width: 1024px) {
  .child {
    width: 25%;
  }
}
  • Поэтому вместо ширины: 100% мы должны писать медиа-запросы, чтобы flexbox использовался только для создания многоколоночных сеток.
@media (min-width: 1024px) {
  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    width: 25%;
  }
}

5. Установите display: block для дочерних элементов в макете Flex.

.parent {
  display: flex;
}

.child {
  display: block;
}
  • При использовании flexbox важно помнить, что при создании flex-контейнера (добавьте display: flex) все дочерние элементы (flex-элементы) блокируются.
  • Это означает, что дочерний элемент установлен вdisplay：block, и может иметь толькоblock. Поэтому, если вы установитеinlineилиinline-block, он изменится наblock,inline-flex=> flex,inline-grid=> gridа такжеinline-table=> table.
  • Таким образом, нет необходимости добавлять дочерние элементы flexdisplay：block, браузер добавит его по умолчанию.

6. Используйте, когда вам не нужно использовать px⁣

.parent {
   padding: 0px;
}
  • Знаете ли вы, что если вы хотите установить значение 0, вам не нужно добавлять px:
.parent {
   padding: 0;
}

7. Повторите тот же код⁣

.parent {
   padding: 10px;
   margin: 20px;
}

.child {
   padding: 10px;
   margin: 20px
}
  • Всегда помните о правиле DRY. Не повторяйтесь. Объем кода будет стоить вам с точки зрения производительности приложения и времени загрузки.
.parent .child {
   padding: 10px;
   margin: 20px;
}

8. Используйте названия цветов

.parent {
  color: red
}
  • Лучше использовать цветовые коды:
.parent {
  color: #fb0100;
}

9. Не используйте условное обозначение свойства

.parent {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
}
  • Избегайте нескольких строк кода, когда вы можете сделать то же самое в одной строке:
.parent {
  margin: 10px;
}

10. Нет альтернативных шрифтоврезервный шрифт⁣ 

.parent {
  font-family: Georgia;
}
  • Итак, при каких обстоятельствах в браузере не будет нужного вам шрифта? Это очень распространено. Только несколько шрифтов считаются «веб-безопасными» — это означает, что на большинстве компьютеров, посещающих ваш веб-сайт, установлен этот шрифт, поэтому браузеры могут его использовать.
.parent {
  font-family: Georgia, Arial, sans-serif;
}

❤️ Прочитав три вещи:

Если вы найдете этот контент вдохновляющим, я хотел бы пригласить вас сделать мне небольшую услугу:

  1. Ставьте лайки, чтобы этот контент увидело больше людей, а также вам было удобно найти этот контент в любой момент (фавориты не лайкаются, они все хулиганят -_-);
  2. Следите за нами и время от времени распространяйте статьи;
  3. Также смотрите другие статьи;

🎉Вы можете написать свой собственный опыт обучения в области сообщений, чтобы обсудить его со мной и другими учениками. Если вы чувствуете, что что-то приобрели, вы также можете поделиться статьей со своими друзьями.

Категории