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