CSS Shorthand so với Longhand - Khi nào nên sử dụng

Shorthand và Longhand - một là ngắn gọn và chính xác khác. Một người đến với sự tồn tại của mong muốn cho sự ngắn gọn, trong khi người kia đứng vững để giữ sự rõ ràng. Dù bằng cách nào, họ có mục đích, ưu và nhược điểm của họ, có thể nói.

Bài đăng này sẽ chiếu sáng cả hai ký hiệu viết tắt CSS và ký hiệu tay dài, trong khi kết luận cách nào là tốt nhất để sử dụng cho tình huống nào.

Tài sản tốc ký là gì?

Tài sản tốc ký là một 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 chiều rộng biên giới, kiểu viền và màu viền sử dụng biên giới tài sản một mình.

Về cơ bản,

 viền: 1px màu xanh đặc; 

giống như:

 đường viền rộng: 1px; kiểu viền: chắc chắn; viền màu: xanh dương;

Với điều này, chúng tôi không phải khai báo riêng các giá trị thuộc tính riêng lẻ (vốn dư thừa, 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.

Làm thế nào nó hoạt động?

Giống như đã đề cập trước đây, chúng tôi viết một tập hợp các giá trị thuộc tính khác theo cách tốc ký, thứ tự không quan trọng nếu tất cả các giá trị thuộc tính trong tốc ký thuộc loại khác giống như trong biên giới. Đối với tài sản với các loại giá trị tương tự như lề, trật tự không thành vấn đề. Khi nghi ngờ, hãy nhớ theo chiều kim đồng hồ!

Bây giờ, nếu chúng ta bỏ lỡ một hoặc hai tài sản trong tờ khai thì sao? Trong ví dụ trên, giả sử chúng ta bỏ qua kiểu viền.

 viền: 1px màu xanh; 

Chúng tôi sẽ không thể nhìn thấy biên giới nữa, không phải vì tài sản tốc ký không hoạt động mà vì kiểu viền mà chúng tôi đã bỏ đi, có giá trị mặc định không ai. Đây là cách tài sản tốc ký đó được kết xuất.

 viền: 1px không có màu xanh; 

Bây giờ chúng ta hãy thả 1px cho chiều rộng biên giới và giữ hai cái còn lại:

 viền: màu xanh đặc;

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ì chiều rộng biên giới tài sản có giá trị mặc định Trung bình.

 viền: màu xanh vừa phải; 

Điều này kết luận cho chúng tôi rằng khi một giá trị tài sản bị bỏ rơi trong một tuyên bố tốc ký, tài sản đó 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 cho cùng).

Nếu đó là đường viền rộng: 1px; cho một yếu tố ở đâu đó trước viền: màu xanh đặc; tương tự, chiều rộng đường viền sẽ là Trung bình (giá trị mặc định), không phải 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ư thừa kế, ban đầu hoặc là không đặt, có sẵn cho tất cả các thuộc tính CSS, theo ký hiệu tốc ký. Nếu chúng ta sử dụng chúng, trình duyệt sẽ không thể biết chính xác thuộc tính nào mà giá trị được cho là đại diện trong tốc ký - toàn bộ tuyên bố sẽ được bỏ.

Các tất cả các bất động sản

Có một thuộc tính tốc ký CSS có thể đặt giá trị cho tất cả các thuộc tính CSS. Giá trị toàn CSS thừa kế, ban đầu và không đặt đượ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 bất động sản.

 div tất cả: ban đầu

Điều này sẽ làm cho div phần tử 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ị.

Cảnh báo

Chúng ta đừng lạm dụng tất cả các bất động sản. 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 tôi không thể chạm vào bất kỳ mã CSS nào trước đây của một yếu tố mà chúng tôi muốn áp dụng thuộc tính này cho.

Chú thích: Thuộc tính CSS màu lấy giá trị thập lục phân với ký hiệu tốc ký nếu hai số giá trị hex trong mỗi kênh màu là như nhau. Ví dụ, nền: # 445599; giống như nền: # 459;.

Tài sản tay dài là gì?

Các tài sản cá nhân có thể được bao gồm trong một thuộc tính tốc ký được gọi là thuộc tính longhand. Một số ví dụ; hình nền, lề trái, Thời lượng hoạt ảnh, v.v..

Tại sao chúng ta nên sử dụng nó?

Mặc dù các lựa chọn thay thế tốc ký là 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ị bỏ qua 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 thiết lập lại không mong muốn.

Lấy phông chữ tài sản tốc ký chẳng hạn. Hãy sử dụng nó trong h4 phần tử (có kiểu trình duyệt mặc định font-weight: in đậm)

 font: 20px "chuyển phát nhanh mới"; 

Trong mã tốc ký ở trên, không có giá trị nào cho trọng lượng phông chữ tài sản, do đó font-weight: in đậm(kiểu mặc định của trình duyệt) sẽ bị ghi đè bởi giá trị mặc định trọng lượng phông chữ: bình thường gây ra h4 yếu tố để mất phong cách táo bạo của nó, có thể không được dự định.

Vì vậy, với ví dụ trên, hai thuộc tính đơn giản, cỡ chữ và phông chữ gia đình hoàn hảo.

Ngoài ra, sử dụng tốc ký cho chỉ gán một hoặc hai giá trị thuộc tính không hữu ích lắm. Tại sao cung cấp cho trình duyệt thêm công việc để diễn giải mọi thuộc tính duy nhất (bao gồm cả các thuộc tính còn sót lại) trong tốc ký, khi chỉ cần một thuộc tính để làm việc?

Sản xuất sang một bên, trong giai đoạn phát triển, một số nhà phát triển (đặc biệt là người mới bắt đầu) có thể thấy việc sử dụng ký hiệu tay dài dễ dàng hơn rất nhiều để làm việc hơn là tốc ký cho dễ đọc và rõ ràng hơn.

Phần kết luận

Ngày nay với khả năng mã hóa nhanh (với sự trợ giúp của các công cụ như Emmet) và thu nhỏ, không cần độ tin cậy cao về tốc ký, nhưng đồng thời, rất hợp lý để gõ lề: 0;. Bối cảnh mà chúng tôi thích các ký hiệu CSS của chúng tôi sẽ thay đổi và tất cả những gì chúng ta phải làm là tìm ra ký hiệu nào sẽ hoạt động tốt nhất cho chúng ta và khi nào.