Tại sao tôi nên thêm các thuộc tính tùy chỉnh của mình bằng "data-"?

Question

Vì vậy, thuộc tính bất kỳ dữ liệu tùy chỉnh mà tôi sử dụng nên bắt đầu với "đĩa dữ liệu":

<li class="user" data-name="John Resig" data-city="Boston" 
    data-lang="js" data-food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Will bất cứ điều gì xấu xảy ra nếu tôi chỉ cần bỏ qua điều này? Ví dụ:

<li class="user" name="John Resig" city="Boston" 
    lang="js" food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Tôi đoán một điều xấu là thuộc tính tùy chỉnh của tôi có thể mâu thuẫn với HTML thuộc tính với ý nghĩa đặc biệt (ví dụ, name), nhưng ngoài này, là có một vấn đề với chỉ viết "example_text" thay vì "data-example_text"? (Nó sẽ không xác nhận, nhưng ai quan tâm?)

Answer 1

Có một số lợi ích để giữ các thuộc tính tùy chỉnh được bắt đầu bằng dữ liệu- *.

1. Đảm bảo sẽ không có bất kỳ xung đột nào với phần mở rộng cho HTML trong các phiên bản sau. Đây là một vấn đề đã gặp phải ở một mức độ nào đó với một số thuộc tính mới được giới thiệu trong HTML5, nơi các trang web hiện có đang sử dụng các thuộc tính có cùng tên và mong đợi hành vi tùy chỉnh khác nhau và không tương thích. (ví dụ: thuộc tính required trên input yếu tố được biết là đã có một số xung đột trên một số trang web phổ biến trong quá khứ)

2. Khi trình duyệt hỗ trợ tính năng này, chúng sẽ cung cấp một API DOM thuận tiện hơn để truy cập các thuộc tính này từ tập lệnh.

3. Chúng cung cấp chỉ báo rõ ràng về thuộc tính nào là thuộc tính tùy chỉnh và thuộc tính nào là thuộc tính được tiêu chuẩn hóa. Điều này không chỉ giúp người xác nhận bằng cách cho phép họ cho phép bất kỳ thuộc tính nào có dữ liệu * trong khi vẫn thực hiện kiểm tra lỗi hữu ích cho các thuộc tính khác (ví dụ như đánh bắt lỗi chính tả), nó cũng giúp làm rõ khía cạnh này của mã nguồn hơn. những người có thể làm việc trên một trang web sau khi tác giả gốc.

Answer 2

Theo John Resig, toàn bộ mục đích của việc bổ sung các thuộc tính dữ liệu tùy chỉnh này vào sepcs HTML5 là cho phép nhúng dữ liệu tùy chỉnh trong HTML trong khi vẫn còn hiệu lực .

Nếu bạn không quan tâm đến xác thực (và, như bạn đã nói, thuộc tính tùy chỉnh của bạn không va chạm với các thuộc tính HTML hiện tại như name, id, style, v.v.), thì tôi đoán bạn không phải sử dụng tiền tố data-. Nhưng xem xét rằng đây không phải là một chi phí rất lớn để viết mã hợp lệ, tương thích, tôi không thấy lý do tại sao bạn sẽ không làm điều đó.