Мои самые глупые ошибки CSS

Переиздано Платоном

Читают: 0

Мы все делаем ошибки в нашем коде. Бывает! Я знаю, что если бы у меня над столом висела одна из этих табличек с надписью «Дни после последней ошибки», надо мной все время зависало бы большое старое гусиное яйцо. Это не обязательно должны быть большие ошибки. Мое неуклюжее «я» совершало небольшие ошибки в репозиториях, начиная от опечаток и заканчивая полными каталогами модулей npm.

Ууууупс.

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

Подобно этому, я ловлю себя на том, что делаю гораздо больше раз, чем хотел бы признать:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

Или когда я пытаюсь установить градиент без background имущество:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

Я ненавижу, как близко X и C на клавиатуре, потому что я не могу сосчитать, сколько раз я пролистываю что-то и ошибаюсь px для pc единиц.

.element {
  font-size: 16pc; /* I meant pixels! */
}

Еще одна ошибка CSS, которую я ловлю время от времени, это та, которую, как я знаю, делают многие другие люди, потому что я слишком часто замечаю ее в сообщениях блога с фрагментами кода:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

Вы когда-нибудь забывали использовать var() вокруг переменной CSS? У меня точно есть.

.element {
  color: --primary-color;
}

Говоря о переменных CSS, назвать их сложно (как и все остальное) и я часто использую неправильную версию переменной, которую я назвал!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

Да, я действительно скопировал фрагмент CSS раньше только для того, чтобы причудливые кавычки мешали ему работать:

.element::before {
  content: “”; /* Should be "" */
}

И, да, я потратил слишком много времени, выясняя, что эти цитаты были виновниками.

Глядя на последний, я вспоминаю, что иногда забываю установить content свойство, когда я работаю с ::before or ::after. Что напоминает мне о том, как я забыл установить элемент position перед попыткой компенсировать или изменить его z-index. Серьезно, такие вещи случаются!

Трудно говорить об ошибках

Вы когда-нибудь заканчивали читать какой-то пост в блоге, в котором рассказывалось об удивительном трюке, и чувствовали что-то вроде синдрома самозванца? Я думаю, это во многом потому, что сообщения в блогах часто маскируют реальную работу — и неудачи — которые превращаются в удивительные трюки. Как человек, который зарабатывает на жизнь чтением подобных сообщений, я могу сказать вам, что многие, если не подавляющее большинство, проходят многократные этапы редактирования, в ходе которых отсеиваются и исправляются потенциально неловкие ошибки.

Даже эти смехотворно потрясающие статьи должны потерпеть неудачу, прежде чем они получат все эти ооооо и ааааа.

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

Но если быть до конца честным с вами, меня часто больше удивляют (и интересуют) путешествие нужно что-то сделать, бородавки и все такое. Путешествие - это взгляд на то, каково это думай как фронтенд разработчик. Вот где происходит настоящее (и самое ценное) обучение.

И все это просто подстраивается под то, что я действительно хочу спросить…