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

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

От автора: когда мы очень сосредоточены на работе над веб-проектом, мы часто забываем или делаем некоторые ошибки, которые могут привести к неправильному коду 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.