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

Ошибки CSS на автопилоте Сайтостроение

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

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

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

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

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

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

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

CSS

123.title {    font-size: bold;}

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

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

CSS

123.title {    opacity: 50;}

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

CSS

1234.title {    /* Это непросто заметить */    opaciy: 0.5;}

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

Это light или lighter?

CSS

123.title {    font-weight: light;}

Отступы

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

CSS

123.section {    padding-top: 10px 20px;}

CSS-Сетка

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

CSS

123.section {    grid-columns: 1fr 1fr 1fr;}

Переменные CSS

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

CSS

READ
YouTube тестирует новый формат коротких видео
123.title {    color: –brand-color;}

box-shadow

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

CSS

1234.title {    /* Invalid */    box-shadow: 0;}

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

visibility

CSS

123.title {    visibility: none;}

Ширина

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

CSS

123.title {    widows: 100px;}

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

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

CSS

123.elem {    left: 14;}

CSS Calc()

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

CSS

123.elem {    font-size: clac(14px + 1vw);}

Цвет CSS

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

CSS

123.elem {    color: #red;}

display

CSS

123.title {    display: absolute;}

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

CSS

123.title {    translate: (-50%, -50%)}

Автор: Ahmad Shadeed

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий