Как писать меньше кода 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.

Www.fam-front.com

Больше контента на plainenglish.io