Tất tần tật về Shorthands trong CSS

Từ lâu việc CSS cho một component,  một phần tử nào đó trong dự án đã quá quen thuộc với chúng ta đúng không nào. Chúng ta thường sẽ viết từng thuộc tính cần dùng cho phần tử đó, chính vì vậy mà trong mỗi dự án chúng ta thường sẽ tổng hợp tạo ra các component CSS sẵn cho chúng và chỉ việc lấy ra dùng, để tối ưu và code nhanh hơn. Hôm nay, mình sẽ giới thiệu đến các bạn một kỹ thuật gọi là Shorthands trong CSS giúp các bạn style ngắn nhưng mang nhiều giá trị hơn giúp cho việc code nhanh hơn và tối ưu hơn. Nào hãy cùng mình tìm hiểu qua bài viết dưới đây nhé!

Shorthands trong CSS là gì?

Shorthand properties trong CSS được hiểu nhanh là cho phép bạn đặt style một thuộc tính nhưng nó sẽ tự động style cho nhiều giá trị liên quan cùng một lúc. Điều này giúp ta style nhiều giá trị một cách nhanh chóng, ngắn gọn, hiệu quả và đỡ mất thời gian hơn.

Trường hợp các bạn style cho thuộc tính background một giá trị là white. Hãy xem nó ảnh hưởng nhé:

+ Thuộc tính được style:

Background: white;

+ Thuộc tính liên quan kèm theo bị ảnh hưởng:

    Background-color:white;

    Background-image: none;

    Background-position:0% 0%;

    Background-size: auto auto;

    Background-repeat:repeat;

    Background-origin: padding-box;

    Background-clip: border-box;

    Background-attachment: scroll;

Thật ấn tượng đúng không nào, mọi thứ dường như bạn nghĩ và bạn cần chỉ có background là màu trắng nhưng thật ra nó liên quan đến những thứ liên quan và setup mặc định cho chúng.

Nhờ khả năng đặc biệt này mà Shorthands CSS giúp chúng ta rất nhiều về cú pháp ngắn gọn hơn và nhanh hơn. Tuy nhiên, nhược điểm là nếu bạn dùng như vậy nhưng không kiểm soát rõ ràng được các thuộc tính còn lại vô tình làm cho các thuộc tính tự setup mặc định mà mình không cần dùng tới.

Toàn bộ Shorthands properties trong CSS

Nếu như đã hiểu được cơ chế của Shorthands, hãy cùng mình tìm hiểu các Shorthands có trong CSS. Chúng hỗ trợ shorthands các thuộc tính liên quan và giá trị mặc định của chúng.

Background :

  - background-color: transparent.

  - background-image: none.

  - background - repeat: repeat.

  - background-position: 0% 0%.

  - background-attachment: scroll.

  - background-clip: border-box.

  - background-size: auto auto.

  - background-origin: padding-box.

Font:

  - font-style: normal.

  - font-variant: normal.

  - font-weight: normal.

  - font-stretch: normal.

  - font-size: medium.

  - line-height: normal.

  - font-family: phụ thuộc vào người dùng.

Border:

  - border-width: medium.

    + border-top-width:medium.

    + border-right-width:medium.

    + border-bottom-width:medium.

    + border-left-width: medium.

 - border-style: none.

    + border-top-style:none.

    + border-right-style:none.

    + border-bottom-style:none.

    + border-left-style: none.

 - border-color: initial.

    + border-top-width: initial.

    + border-right-width: initial.

    + border-bottom-width: initial.

    + border-left-width: initial.

Margin:

 - margin-bottom: 0.

 - margin-left:0.

 - margin-right:0.

 - margin-top:0.

Padding:

 - padding-bottom: 0.

 - padding-left: 0.

 - padding-right: 0.

 - padding-top:0.

Tổng kết lại, shorthands là một kỹ thuật thú vị giúp chúng ta làm việc một cách nhanh hơn, ngắn gọn hơn và cũng lưu ý khi sài Shorthands là chúng ta phải kiểm soát tốt được các thuộc tính và biết được là chúng sử dụng cho từng trường hợp. Hy vọng với kiến thức về Shorthands mà mình chia sẽ, sẽ giúp ích được cho các bạn!

----------

Ảnh bìa: https://bitly.com.vn/6dy09o