DEV Community

Cover image for Awesome CSS shorthand tricks to write less code
Roman
Roman

Posted on • Originally published at programmingly.dev

Awesome CSS shorthand tricks to write less code

#css #webdev #productivity #frontend

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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

    .container {
      position: absolute;
      inset: 10px 0;
    }
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

    .card {
      width: max(300px, 400px);
    }
Enter fullscreen mode Exit fullscreen mode

CSS scale property

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

Traditional approach:

    .card {
      transform: scale(1.2);
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

    .card {
      scale: 1.2;
    }
Enter fullscreen mode Exit fullscreen mode

: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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

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

: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;
    }
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

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

    .vertical-margin {
      margin-block: 15px 20px;
    }
Enter fullscreen mode Exit fullscreen mode

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;
      }
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

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

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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

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

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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

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

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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

    animation: slide 2s ease-in-out infinite;
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

Less code with shorthand property 👇

    .masked {
      mask: url(mask-img.svg) center no-repeat;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)