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;
use
font: italic bold 0.8em/1.2 Arial, sans-serif;
Background
Instead of
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
Use
background: #000 url(images/bg.gif) no-repeat left top;
Border
Instead of
border-width: 1px;
border-style: solid;
border-color: black
Use
border: 1px solid black;
Margin
Instead of
margin-top: 10px;
margin-right: 15px;
margin-left: 20px;
margin: 25px;
Use
margin: 10px 15px 20px 25px;
Or instead of
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin: 10px;
Use
margin: 10px;
Transition
Instead of
transition-property: all;
transition-duration: 3s;
transition-timing-function: ease;
transition-delay: 1s;
Use
transition: all 3s ease 1s;
List
Instead of
list-style-type: disc;
list-style-position: inside;
list-style-image: url(disc.png)
Use
list-style: disc inside url(disc.png)
Top comments (0)