CSS Shorthand vs Longhand là gì và Cách sử dụng

0
674

ShorthandLonghand – 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 LonghandCSS 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-widthborder-styleborder-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;
Để làm điều này, chúng ta không thể khai báo riêng các giá trị thuộc tính riêng lẻ (vốn tốn thời gian và không gian). Nó cũng đặt lại các thuộc tính bên trái trong khai báo, một cái gì đó có thể được tận dụng.

CSS Shorthand hoạt động thế nào?

Giống như đã đề cập trước đây, chúng ta viết một tập hợp các giá trị thuộc tính khác theo cách viết shorthand, thứ tự không có vấn đề gì nếu tất cả các giá trị thuộc tính trong tốc ký đều thuộc loại khác như ở border.
Đối với các thuộc tính có các loại giá trị tương tự như margin, chúng sẽ làm việc theo thứ tự. Bạn chỉ cần nhớ thứ tự theo chiều kim đồng hồ là được.
Bây giờ, nếu chúng ta bỏ lỡ một hoặc hai thuộc tính trong khai báo thì sao? Trong ví dụ trên, chúng ta thử bỏ qua border-style
border: 1px blue;
Ở cách viết này chúng ta không thể nhìn thấy các đường viền nữa, không phải vì thuộc tính shorthand đã không hoạt động mà vì chúng ta đã bỏ border-style đi, và giá trị mặc định là none. Đây là cách shorthand làm việc:
border: 1px none blue;
Bây giờ, hãy thử bỏ 1px cho chiều rộng đường viền (border-width) và giữ lại border-style và border-color:
border: solid blue;
Chúng ta sẽ có thể nhìn thấy các đường viền, chỉ với chiều rộng dày hơn và đó là vì thuộc tính border-width có giá trị mặc định là medium.
border: medium solid blue;
Điều này dẫn tới chúng ta có được một kết luận rằng khi một giá trị thuộc tính bị bỏ sót trong một khai báo shorthand nào, thuộc tính đó sẽ lấy giá trị mặc định của nó (ngay cả khi nó phải ghi đè bất kỳ giá trị nào trước đó được gán)
Nếu có border-width: 1px; Cho một phần tử ở đâu đó trước border: solid blue; Tương tự, độ rộng đường viền sẽ ở mức medium (giá trị mặc định), không phải là 1px.
Một điều đáng nói nữa là chúng ta không thể sử dụng các giá trị như inherit (kế thừa), initial (ban đầu) hoặc unset (không thiết lập). Nếu chúng ta sử dụng những thứ đó, trình duyệt sẽ không thể biết chính xác nên nó sẽ bị loại bỏ.

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-imagemargin-leftanimation-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

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.