DEV Community

Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

4 1

Useful CSS Shorthand

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more