Ошибки CSS на автопилоте

Ошибки CSS на автопилоте

От автора: когда мы очень сосредоточены на работе над веб-проектом, мы часто забываем или делаем некоторые ошибки, которые могут привести к неправильному коду CSS. Я люблю называть это «ошибками на автопилоте». Ошибки такого рода, которые заставляют нас спрашивать себя: «Ой, почему я это сделал?», и их решение не займет много времени, только если вы их изначально нашли.

Я спросил в Твиттере о самых забавных ошибках, которые может совершить фронтенд-разработчик, и получил несколько забавных ответов.

В этой статье я рассмотрю некоторые из наиболее распространенных и забавных ошибок CSS, которые мы совершаем на автопилоте.

Ошибки, которые делаю я

Размер шрифта

Перепутать между font-size и font-weight — обычное дело. Вот ошибка, которую я совершаю слишком часто.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Непрозрачность

Я точно не знаю причину, но иногда я забываю указать процентное значение непрозрачности.

Еще одна распространенная проблема — это неправильный ввод opacity объекта.

Толщина шрифта

Это light или lighter?

Отступы

Это может произойти, когда вы думаете, что свойство padding, а на самом деле это padding-top.

CSS-Сетка

Иногда я ввожу grid-column вместо grid-template-columns.

Переменные CSS

Не знаю почему, но я обнаружил, что мне лень писать var(—brand-color) вместо этого.

box-shadow

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Я всегда забываю, что box-shadow нужно сбросить с помощью none.

От сообщества

visibility

Ширина

Я не могу сосчитать, сколько раз делал это, и об этом напоминает мне Sublime Text.

Свойства смещения

Возникает странное ощущение отказа от единиц измерения свойств смещения CSS для позиционированного элемента.

CSS Calc()

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

Цвет CSS

Я помню, как столкнулся с такой ошибкой. Может быть, это результат использования red, чтобы быстро что-то показать?

display

Преобразования

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.