DEV Community

Elightwalk Technology
Elightwalk Technology

Posted on

CSS Shorthand Essentials: Less Code, Same Impact

Image description

1. Margin and Padding

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

2. Background

The background shorthand combines multiple background properties into one line.

background-color: #ff5733;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
Enter fullscreen mode Exit fullscreen mode 
background: #ff5733 url('image.jpg') no-repeat center;
Enter fullscreen mode Exit fullscreen mode

3. Font

Combine font properties like style, variant, weight, size, line-height, and family.

font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
Enter fullscreen mode Exit fullscreen mode

font: italic bold 16px/1.5 Arial, sans-serif;

4. Border
Combine border properties into one line.

border-width: 2px;
border-style: solid;
border-color: #333;
Enter fullscreen mode Exit fullscreen mode 
border: 2px solid #333;
Enter fullscreen mode Exit fullscreen mode

5. List-Style
Combine properties like list-style-type, list-style-position, and list-style-image.

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

6. Transition
Set multiple transition properties in one line.

transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.2s;
Enter fullscreen mode Exit fullscreen mode 
transition: opacity 0.5s ease-in-out 0.2s;
Enter fullscreen mode Exit fullscreen mode

7. Animation

animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
Enter fullscreen mode Exit fullscreen mode 
animation: slidein 3s ease-in 1s;
Enter fullscreen mode Exit fullscreen mode 
`animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;`
Enter fullscreen mode Exit fullscreen mode 
animation: slidein 3s ease-in 1s infinite alternate;
Enter fullscreen mode Exit fullscreen mode

8. Flex
The flex property is shorthand for flex-grow, flex-shrink, and flex-basis.

flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
Enter fullscreen mode Exit fullscreen mode 
flex: 1 0 auto;
Enter fullscreen mode Exit fullscreen mode

9. Grid Template

grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
grid-template-areas: "header header" "sidebar main";
Enter fullscreen mode Exit fullscreen mode 
grid-template: "header header" 100px "sidebar main" 200px / 1fr 2fr;
Enter fullscreen mode Exit fullscreen mode

10. Text Decoration

Combine line, style, color for text-decoration.

text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
Enter fullscreen mode Exit fullscreen mode 
text-decoration: underline wavy red;
Enter fullscreen mode Exit fullscreen mode

But why Web designer Use this method?

  1. Reduces Code Size
  2. Enhances Readability and Simplicity
  3. Improves Maintainability
  4. Reduces the Chance of Errors
  5. Increases Efficiency in Development
  6. Supports Consistent Styling Across Projects
  7. Better for Debugging
  8. Improves CSS Optimization and Minification

Ending Point
shorthand properties help developers write CSS that is faster to write, easier to read, more efficient to run, and simpler to maintain. This method aligns with best practices in modern web development, promoting clean and optimized code.

Top comments (0)

Read next

dhanush9952 profile image

TypeScript for Professionals

Dhanush -

ahmad_tibibi profile image

TS1011: An element access expression should take an argument.

Ahmad Tibibi -

ahmad_tibibi profile image

TS1012: Unexpected token.

Ahmad Tibibi -

alisamir profile image

Becoming a Good Software Engineer: Business Alignment and Performance Optimization 💯

Ali Samir -