DEV Community

Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

Useful CSS Shorthand

#css #webdev

As a developer, we must try to minimize our code as much as possible, without affecting the efficiency of our program/code. Be it on front-end side, server side, back-side, database queries or design code. We should learn positive shorthand for the same. Here we are discussing some useful CSS Shorthand for developers.

Font

Instead of

font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
Enter fullscreen mode Exit fullscreen mode

use

font: italic bold 0.8em/1.2 Arial, sans-serif;
Enter fullscreen mode Exit fullscreen mode

Background

Instead of

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
Enter fullscreen mode Exit fullscreen mode

Use

background: #000 url(images/bg.gif) no-repeat left top;
Enter fullscreen mode Exit fullscreen mode

Border

Instead of

border-width: 1px;
border-style: solid;
border-color: black
Enter fullscreen mode Exit fullscreen mode

Use

border: 1px solid black;
Enter fullscreen mode Exit fullscreen mode

Margin

Instead of

margin-top: 10px;
margin-right: 15px;
margin-left: 20px;
margin: 25px;
Enter fullscreen mode Exit fullscreen mode

Use

margin: 10px 15px 20px 25px;
Enter fullscreen mode Exit fullscreen mode

Or instead of

margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin: 10px;
Enter fullscreen mode Exit fullscreen mode

Use

margin: 10px;
Enter fullscreen mode Exit fullscreen mode

Transition

Instead of

transition-property: all;
transition-duration: 3s;
transition-timing-function: ease;
transition-delay: 1s;
Enter fullscreen mode Exit fullscreen mode

Use

transition: all 3s ease 1s;
Enter fullscreen mode Exit fullscreen mode

List

Instead of

list-style-type: disc;
list-style-position: inside;
list-style-image: url(disc.png)
Enter fullscreen mode Exit fullscreen mode

Use

list-style: disc inside url(disc.png)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ankushgoyal11 profile image

Angular: Observable v/s Promise

Ankush Goyal -

jenchen profile image

CSS - display: flex vs inline-flex

Jen C. -

vignesh_j profile image

Understanding the Data Link and Physical Layers: The Final Step in Mastering OSI Model and Computer Networking

Vignesh J -

valeriavg profile image

Day 14: Keep on Spinning! ♻️

Valeria -