Một số CSS Shorthand hay giúp ích cho lập trình viên

CSS shorthand giúp chúng ta tiết kiệm thời gian cho việc code, thay vì sử dụng cách viết hết tất cả các thuộc tính, trong một số trường hợp chúng ta có thể gom chúng lại cho gọn hơn. Bài viết này mình sẽ giới thiệu các bạn làm điều đó. Cùng đọc bài viết nhé ^^.

CSS Background

Thuộc tính background cho phép chúng ta kết hợp các thuộc tính background khác giúp giảm số dòng code ^^.

background viết gọn cho những thuộc tính dưới:

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment

Thay vì sử dụng các thuộc tính này trên mỗi dòng code, chúng ta có thể đơn giản viết gọn chúng lại chỉ với một dòng code 👏

Thay vì viết thế này:

.css-shorthand {
  background-color: #ffffff;
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Chúng ta có thể viết

.css-shorthand {
  background: #ffffff url("img.png") no-repeat right top;
}

CSS Border

Khi set border cho element chúng ta cũng có thể viết gọn lại như sau:

Thay vì viết:

.css-shorthand {
  border-width: 1px;
  border-style: dashed;
  border-color: #fff;
}

Ta có thể viết gọn lại thành:

.css-shorthand {
  border: 1px dashed #fff;
}

Chúng ta có thể viết gộp 3 thuộc tính lại thành 1 dòng. Nhìn ngắn gọn và dễ hiểu đúng không 😁

CSS Font

Khi set Font cho element ta có thể sử dụng cách viết ngắn gọn sau:

Thay vì viết:

.css-shorthand {
  font-style: italic;
  font-weight: 600;
  font-style: 16px;
  line-height: 1.3;
  font-family: monospace;
}

Ta có gộp chúng lại nếu bạn cần:

.css-shorthand {
  font: italic 600 16px/1.3 monospace;
}

CSS Inset

Thuộc tính CSS inset là một cách viết tắt tương ứng với các thuộc tính top, right, bottom, left. Nó giống với cú pháp viết tắt như khi dùng margin hay padding.

Ta có thể viết:

.css-shorthand {
  top: 5px;
  right: 10px;
  bottom: 5px;
  left: 10px;
}

Thành như sau:

.css-shorthand {
  inset: 5px 10px 5px 10px; /* top right bottom left */
}

Padding and Margin

cả inset, padding và margin có cú pháp viết tắt giống nhau.

Thay vì ta viết thế này:

.css-shorthand {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}  

Ta có thể viết gọn thành:

.css-shorthand {
  padding: 10px 20px; /* top/bottom: 10px left/right: 20px */
}

Như vậy là mình đã giới thiệu cho các bạn một số cách viết shorthand, sử dụng cú pháp viết gọn này có thể giúp chúng ta giảm thời gian viết code, cải thiện tốc độ tải trang vì dung lượng file css được giảm thiểu rất đáng kể.

Trong một số trường hợp dùng shorthand có thể khiến chúng ta khó đọc, có thể gây ra nhầm lẫn. Tuy nhiên chúng ta không thể phủ nhận lợi ích của cách viết shorthand. Do đó chúng ta hãy sử dụng chúng một cách hợp lí nhé ^^.

Chúc các bạn một ngày học tập hiệu quả. Hẹn gặp các bạn trong các bài viết sắp tới ^^.

Các bạn viết liên quan:

1. Một số JavaScript Shorthand giúp code ngắn gọn, clear hơn
2. Khác nhau giữa Background vs Background-Color trong CSS