От автора: когда мы очень сосредоточены на работе над веб-проектом, мы часто забываем или делаем некоторые ошибки, которые могут привести к неправильному коду CSS. Я люблю называть это «ошибками на автопилоте». Ошибки такого рода, которые заставляют нас спрашивать себя: «Ой, почему я это сделал?», и их решение не займет много времени, только если вы их изначально нашли.
Я спросил в Твиттере о самых забавных ошибках, которые может совершить фронтенд-разработчик, и получил несколько забавных ответов.
В этой статье я рассмотрю некоторые из наиболее распространенных и забавных ошибок CSS, которые мы совершаем на автопилоте.
Ошибки, которые делаю я
Размер шрифта
Перепутать между font-size и font-weight — обычное дело. Вот ошибка, которую я совершаю слишком часто.
.title { font-size: bold;
}Непрозрачность
Я точно не знаю причину, но иногда я забываю указать процентное значение непрозрачности.
.title { opacity: 50;
}Еще одна распространенная проблема — это неправильный ввод opacity объекта.
.title { /* Это непросто заметить */ opaciy: 0.5;
}Толщина шрифта
Это light или lighter?
.title { font-weight: light;
}Отступы
Это может произойти, когда вы думаете, что свойство padding, а на самом деле это padding-top.
.section { padding-top: 10px 20px;
}CSS-Сетка
Иногда я ввожу grid-column вместо grid-template-columns.
.section { grid-columns: 1fr 1fr 1fr;
}Переменные CSS
Не знаю почему, но я обнаружил, что мне лень писать var(—brand-color) вместо этого.
.title { color: --brand-color;
}box-shadow
Я всегда забываю, что box-shadow нужно сбросить с помощью none.
.title { /* Invalid */ box-shadow: 0;
}От сообщества
visibility
.title { visibility: none;
}Ширина
Я не могу сосчитать, сколько раз делал это, и об этом напоминает мне Sublime Text.
.title { widows: 100px;
}Свойства смещения
Возникает странное ощущение отказа от единиц измерения свойств смещения CSS для позиционированного элемента.
.elem { left: 14;
}CSS Calc()
Если используемый вами редактор кода не обеспечивает надлежащего выделения, вы пропустите этот.
.elem { font-size: clac(14px + 1vw);
}Цвет CSS
Я помню, как столкнулся с такой ошибкой. Может быть, это результат использования red, чтобы быстро что-то показать?
.elem { color: #red;
}display
.title { display: absolute;
}Преобразования
.title { translate: (-50%, -50%)
}Автор: Ahmad Shadeed
Источник: https://ishadeed.com
Редакция: Команда webformyself.