CSS Shorthand và Longhand
Bài đăng này đã không được cập nhật trong 5 năm
Bài viết được dịch từ nguồn: CSS Shorthand vs. Longhand – Which to Use
Một kiểu ra đời khi mà người ta muốn code CSS ngắn gọn hơn, còn một kiểu thì để giữ sự rõ ràng, dễ hiểu. Dù code theo kiểu nào thì cũng có mục đích cũng như ưu/nhược điểm riêng của từng kiểu.
Bài viết này sẽ giúp bạn hiểu hơn về 2 kiểu shorthand với longhand này để từ đó thấy được dùng kiểu nào sẽ là tốt hơn trong từng trường hợp cụ thể.
Shorthand là gì
Kiểu shorthand đơn giản là sẽ đem gom giá trị của một số thuộc tính CSS lại với nhau. Ví dụ ta có thể gán giá trị cho border-width
, border-style
và border-color
mà chỉ cần sử dụng duy nhất thuộc tính border
như sau:
border: 1px solid blue;
Chắc hẳn ví dụ này cũng rất quen thuộc với bạn, code trên sẽ tương đương với:
border-width: 1px;
border-style: solid
border-color: blue;
Với cách này thì ta không phải khai báo riêng lẻ cho từng giá trị width
, style
, color
, giúp tiết kiệm không gian và thời gian.
1. Cách thức hoạt động
Như đã đề cập ở trên, ta sẽ dùng shorthand
để khai báo một tập hợp các giá trị của thuộc tính, thứ tự của các thuộc tính đó không quan trong, miễn nó đều là thành phần của thuộc tính bên ngoài (trong ví dụ trên là width
, style
, color
của border
). Với những thuộc tính có giá trị tương tự như margin
thì thứ tự mới quan trọng, bạn hãy nhớ theo chiều kim đồng hồ.
Bây giờ, trong ví dụ trên thì sẽ ra sao nếu ta khai báo thiếu mất giá trị, giả sử là border-style
chẳng hạn, code sẽ như này:
border: 1px blue;
Kết quả là ta sẽ không thấy border
hiện ra nữa, không phải khai báo shorthand
kia không làm việc mà vì ta quên khai báo nên border-style
đã nhận giá trị mặc định của nó là none
. Code sẽ tương đương như sau:
border: 1px none blue;
Bây giờ hãy bỏ border-width
và giữ nguyên 2 thuộc tính còn lại:
border: solid blue;
Kết quả là ta vẫn thấy border
hiện ra nhưng với dày hơn 1px
một chút bởi vì border-width
đã nhận giá trị mặc định là medium
.
Điều này cho thấy, khi một giá trị của thuộc tính không được khai báo trong Shorthand thì nó sẽ nhận giá trị mặc định của mình (ngay cả khi nó phải ghi đè bất kỳ giá trị nào trước đó được gán cho cùng thuộc tính).
Nếu có khai báo border-width: 1px
cho một thành phần ở đâu đó trước border: solid blue
thì độ rộng của border
sẽ là medium
(mặc định) chứ không phải là 1px
.
Chú ý là ta sẽ không thể dùng các giá trị như inherit
, initial
hoặc là unset
cho tất cả thuộc tính CSS trong Shorthand, vì như thế thì browser sẽ không thể nào biết được chính xác thuộc tính nào là đại diện cho Shorthand, cho nên tất cả khai báo sẽ bị hủy.
2. Thuộc tính all
Có một Shorthand có thể áp dụng cho toàn bộ các thuộc tính CSS. Các giá trị inherit
, initial
hay unset
được áp dụng cho tất cả các thuộc tính và do đó đây là các giá trị duy nhất được chấp nhận bởi thuộc tính all
.
div {
all: initial
}
Điều này sẽ làm cho tất cả các thành phần div
bỏ qua các thuộc tính CSS mà nó có và đặt lại với giá trị mặc định. Chính vì thế mà không nên lạm dụng thuộc tính all
.
Note: Thuộc tính color
sẽ nhận giá trị hexadecimal
trong Shorthand nếu như 2 số của giá trị hex
trong nó là giống nhau, ví dụ background: #445599
sẽ tương đương background: #459
.
Longhand là gì
Là các thuộc tính đơn lẻ có thể được gộp lại trong Shorthand, ví dụ như background-image
, margin-left
, animation-duration
, ...
Vì sao ta sử dụng Longhand
Sử dụng Longhand thì dài hơn, không tiện nhưng sao ta vẫn cần sử dụng? Như đề cập ở phần trên, Shorthand sẽ ghi đè các thuộc tính bị bỏ sót với giá trị mặc định của nó, đây sẽ là vấn đề nếu như việc ghi đè đó là không cần thiết.
Hãy lấy ví dụ khai báo font
bên dưới để làm ví dụ, sử dụng nó trong thành phần h4
(được in đậm với mặc định font-weight:bold
):
font: 20px "courier new";
Trong Shorthand này, thuộc tính font-weight
không được khai báo nên nó sẽ nhận giá trị mặc định là font-weight:normal
nên thẻ h4
kia sẽ mất in đậm.
Với ví dụ trên thì khai báo 2 thuộc tính Longhand là font-size
và font-family
sẽ tốt hơn. Và khai báo Shorthand cho một vài thuộc tính thì cũng không có nhiều ý nghĩa.
Trong giai đoạn phát triển, một số dev (đặc biệt là newbie) có thể thấy việc sử dụng Longhand sẽ dễ dàng hơn rất nhiều so với Shorthand vì nó dễ đọc và rõ ràng hơn.
Tham khảo
Cám ơn vì đã theo dõi bài viết, hi vọng sẽ có ích với bạn.
All rights reserved