Shorthand và Longhand – là 2 cách viết CSS ngắn gọn và viết CSS chính xác. Một cách mong muốn làm cho code ngắn gọn, trong khi một cách khác mong muốn làm cho CSS rõ ràng.
Có thể nói, dù bằng cách nào, cách nào cũng có mục đích, ưu và nhược điểm của chúng.
CSS Shorthand vs CSS Longhand
Bài viết này sẽ giúp bạn hiểu một số ký hiệu viết tắt CSS (shorthand) và ký hiệu tay dài (longhand), và kết luận cách viết nào là tốt nhất để sử dụng cho tình huống nào.
Đặc tính của CSS Shorthand là gì?
Thuộc tính shorthand là thuộc tính lấy các giá trị cho các bộ thuộc tính CSS khác. Ví dụ: chúng ta có thể gán giá trị cho border-width
, border-style
và border-color
sử dụng từng thuộc tính border
riêng biệt.
Ví dụ:
border
:
1px
solid
blue
;
Sẽ tương đương với:
border-width
:
1px
;
border-style
:
solid
;
border-color
:
blue
;
CSS Shorthand hoạt động thế nào?
border
:
1px
blue;
border
:
1px
none
blue
;
border
:
solid
blue
;
border
:
medium
solid
blue
;
Thuộc tính all trong shorthand
Có một thuộc tính CSS shorthand có thể đặt giá trị cho tất cả các thuộc tính CSS. Các thuộc tính inherit, initial, 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 tất cả các thuộc tính.
div {
all: initial
}
Điều này sẽ làm cho phần tử div bỏ qua TẤT CẢ các giá trị thuộc tính CSS mà nó có và đặt lại giá trị mặc định trong mỗi giá trị.
Lưu ý khi sử dụng CSS Shorthand
Không nên lạm dụng thuộc tính all. Nhu cầu về nó chỉ có thể phát sinh trong những trường hợp rất hiếm, khi chúng ta không thể chạm vào bất kỳ mã CSS nào trước đây của một phần tử mà chúng ta muốn áp dụng thuộc tính này cho nó.
Thuộc tính color trong CSS lấy giá trị thập lục phân với ký hiệu shorthand nếu hai số giá trị hex trong mỗi kênh màu là như nhau. Ví dụ: background: #445599; sẽ tương đương với background: #459;
CSS longhand là gì?
Các thuộc tính riêng lẻ có thể được bao gồm trong một thuộc tính shorthand được gọi là thuộc tính longhand. Một số ví dụ: background-image
, margin-left
, animation-duration
, vv.
Tại sao nên sử dụng longhand?
Mặc dù cách viết shorthand là rất tiện dụng, nhưng chúng có một nhược điểm. Hãy nhớ lại lúc đầu chúng ta đã thấy cách tốc ký ghi đè bất kỳ thuộc tính bỏ sót nào với các giá trị mặc định của chúng? Đây có thể là một vấn đề nếu CSS reset không hoạt động như mong muốn.
Lấy thuộc tính shorthand như font chữ chẳng hạn. Hãy để sử dụng nó trong phần tử h4 (có kiểu phông chữ mặc định là font-weight: bold)
font
:
20px
"courier new"
;
Trong mã shorthand ở trên, không có giá trị nào cho thuộc tính font-weight, do đó, font-weight: bold (kiểu mặc định của trình duyệt) sẽ bị ghi đè bởi giá trị mặc định font-weight: normal; làm cho phần tử h4 mất kiểu đậm không như dự tính.
Vì vậy, với ví dụ trên, hai thuộc tính longhand đơn giản là font-size và font-family là hoàn hảo.
Ngoài ra, sử dụng shorthand để chỉ gán một hoặc hai giá trị thuộc tính thì không hữu ích lắm.
Tại sao phải làm cho trình duyệt mất thời gian suy diễn các thuộc tính bị bỏ sót trong shorthand, trong khi chỉ cần một thuộc tính để làm việc?
Trong giai đoạn phát triển và lập trình website, một số lập trình viên (đặc biệt là người mới bắt đầu học lập trình) có thể thấy việc sử dụng ký hiệu longhand dễ dàng hơn rất nhiều so với shorthand trong việc đọc và ghi nhớ.
CSS Shorthand vs Longhand là gì và Cách sử dụng
Kết luận
Ngày nay với khả năng lập trình nhanh, viết CSS nhanh (với sự trợ giúp của các công cụ như Emmet) và minification, chắc chắn bạn sẽ là không cần shorthand. Hơn nữa, để đảm bảo khả năng maintain tốt thì phần lớn cách viết longhand là tốt hơn.
Trong trường hợp bạn vẫn muốn sử dụng shorthand thì nên biết nó sử dụng tốt nhất khi nào.