Awesome CSS shorthand tricks to write less code

As a front-end developer, we all want is write less CSS code and get more while designing a web application.

If you’re someone who is curious about CSS tricks to write less code, then keep reading this article because, I'm share 11 awesome CSS shorthand tricks that help us write less and more optimized & maintainable code.

CSS inset property

The inset property is the shorthand property for top, right, left & bottom property.

Traditional way:

.container {
      position: absolute;
      top: 10px;
      right: 0;
      left: 0;
      bottom: 10px;
    }

Less code with shorthand property 👇

.container {
      position: absolute;
      inset: 10px 0;
    }

min() /max() function

The min() and max() functions are really useful for creating responsive CSS, as they allow you to set minimum and maximum values for sizing properties.

Traditional CSS Way:

.card {
      width: 300px;
      max-width: 400px;
    }

Less code with shorthand property 👇

.card {
      width: max(300px, 400px);
    }

CSS scale property

scale property is the shorthand property for transform: scale().

Traditional approach:

.card {
      transform: scale(1.2);
    }

Less code with shorthand property 👇

.card {
      scale: 1.2;
    }

:is() pseudo-class

The :is() pseudo-class allows us to apply same style to multiple selectors by grouping them. Learn more about :is() in detail.

Traditional approach:

.form button, .form input {
      font-size: 18px;
      background-color: #e3e3e3;
      border: 1px solid #333;
    }

Less code with shorthand property 👇

.form :is(button, input) {
      font-size: 18px;
      background-color: #e3e3e3;
      border: 1px solid #333;
    }

:has() pseudo-class

The :has() pseudo-class allows us to apply style conditionally. Learn more about :has() in detail().

.card:has(a) {
      background-color: gray;
    }
    .card:has(img) {
      background-color: yellow;
    }

margin-inline / margin-block

margin-inline property is the shorthand property for horizontal margin, whereas, margin-block property is the shorthand property for vertical margin.

Traditional approach:

.horizontal-margin {
      margin-left: 10px;
      margin-right: 20px;
    }

    .vertical-margin {
      margin-top: 15px;
      margin-bottom: 20px;
    }

Less code with shorthand property 👇

.horizontal-margin {
      margin-inline: 10px 20px;
    }

    .vertical-margin {
      margin-block: 15px 20px;
    }

clamp() function

The clamp() function in CSS lets you set a value that automatically adjusts within a specified range, by defining a minimum, preferred, and maximum value for properties like width or font size.

Traditional approach:

p {
      font-size: 24px;
    }

    @media max-width(992px) {
      p {
        font-size: 16px;
      }
    }
    @media max-width(678px) {
      p {
        font-size: 12px;
      }
    }

Less code with shorthand property 👇

p {
      font-size: clamp(12px, 16px, 24px);
    }

CSS font property

Instead of defining separately font properties, you can use the shorthand font property to achieve the same thing

Traditional approach:

p {
      font-size: 18px;
      font-weight: 600;
      font-family: "inter", sans-serif;
      line-height: 1.5;
    }

Less code with shorthand property 👇

p {
      font: 600 18px/1.5 "inter", sans-serif;

CSS background property

The background property is the shorthand property for multiple background properties.

Traditional approach:

.container {
      background-color: blue;
      background-image: url(pattern.svg);
      background-position: center;
      background-repeat: no-repeat;
    }

Less code with shorthand property 👇

.container {
     background: blue url(pattern.svg) center no-repeat;

CSS animation property

Instead of defining different values of animation property separately, you can use shorthand animation property to achieve same behavior.

Traditional approach:

.slide-animate {
      animation-name: slide;
      animation-duration: 2s;
      animation-timing-function: ease-in-oyt;
      animation-iteration-count: infinite;
    }

Less code with shorthand property 👇

animation: slide 2s ease-in-out infinite;

CSS mask property

The mask property allow to hide parts of an element by applying masking .

Traditional approach:

.masked {
      mask-image: url(mask-img.svg);
      mask-position: center;
      mask-repeat: no-repeat;
    }

Less code with shorthand property 👇

.masked {
      mask: url(mask-img.svg) center no-repeat;

Wrapping up

By using these CSS shorthand properties & functions not just save time, but also maintain code, easy to read and optimized our code. By using these one-liner CSS tricks achieve same behavior as we did with traditional approach, but they are short & consume less time and easy to maintain with little knowledge.

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles