Как писать меньше кода CSS и повысить производительность!

Изучение того, как писать CSS с меньшим количеством строк кода, поможет вам иметь меньше строк кода для загрузки на вашу веб-страницу, что ускоряет загрузку страницы.
В итоге результат тот же, так почему бы не записать его в одну строчку. Можно сказать, что написание одной строкой не будет читаться и не видно, но подумайте об этом! Если вам нужно написать все в несколько строк, это сделает файл CSS слишком длинным и трудным для чтения, не так ли?
Готовы, приступим!
Вот наиболее часто используемый код CSS на нескольких веб-страницах, который можно быстро сократить до одной строки:
#1. Фон
background: #000 url(images/image.png) no-repeat left top; //vs background-color: #000; background-image: url(images/image.png) background-repeat: no-repeat; background-position: left top;

# 2- Анимация
anmation: crazy 4s ease-in-out 0.5s 12 backwards; //vs animation-name: crazy; animation-duration: 4s; animation-timing-function: ease-in-out; animation-deplay: 0.5s; animation-iteration-count: 12; animation-dirrection: backwards;

# 3- Шрифт
font: itlaic bold 15px/1.2 Arial, sans-serif; //vs font-style: italic; font-weight: bold; font-size: 15px; line-height: 1.2; font-family: Arial, sans-serif;

# 4- Маржа
margin: 10px 5px 10px 5px; //vs margin-top:10px; mrgin-right: 5px; margin-bottom: 10px; margin-left: 5px;

# 5- Список
list-style: dic outside url('img/shape.png')
// vs
list-style-type: disc;
list-style-position: outside;
list_style-image: url('img/shape.png')

# 6- Прокладка
padding: 1em 3px 30px 5px; //Vs padding-top: 1em; padding-right: 3px; padding-bottom: 30px; padding-left: 5px;

# 7- Граница
border: 1px solide #000 //vs border-width: 1px; border-style: solid; border-color: #000

Что вы думаете об этих сокращениях? Вы знаете другие сокращения? Пожалуйста, поделитесь с нами!
Сохраните статью для будущего использования 😉

Дорогой читатель, надеюсь, это было понятно и полезно. Надеюсь, ты в безопасности, где бы ты ни был, и твоя семья тоже! Повесить там. Завтра будет лучше!
Давайте свяжемся с LinkedIn, Facebook, Instagram, Youtube, или Twitter.
Больше контента на plainenglish.io