Lợi ích của việc sử dụng Thuộc tính tuỳ chỉnh trong hệ thống thiết kế và thư viện thành phần.
Tôi là Dave và tôi là Nhà phát triển giao diện người dùng cấp cao tại Nordhealth. Tôi phụ trách việc thiết kế và phát triển hệ thống thiết kế Nord, bao gồm cả việc xây dựng Thành phần web cho thư viện thành phần của chúng tôi. Tôi muốn chia sẻ cách chúng ta giải quyết vấn đề trong việc định kiểu cho Thành phần web bằng cách sử dụng Thuộc tính tuỳ chỉnh của CSS và một số lợi ích khác khi sử dụng Thuộc tính tuỳ chỉnh trong hệ thống thiết kế và thư viện thành phần.
Cách chúng tôi xây dựng Thành phần web
Để xây dựng Thành phần web, chúng ta dùng Lit, một thư viện cung cấp nhiều mã nguyên mẫu như trạng thái, kiểu được xác định phạm vi, tạo mẫu và nhiều mã khác. Lit không chỉ nhẹ mà còn được xây dựng trên các API JavaScript gốc, nghĩa là chúng ta có thể phân phối một gói mã gọn nhẹ tận dụng các tính năng mà trình duyệt đã có.
Nhưng điều hấp dẫn nhất về Thành phần web là chúng hoạt động với hầu hết mọi khung JavaScript hiện có hoặc thậm chí không có khung nào. Sau khi gói JavaScript chính được tham chiếu trong trang, việc sử dụng Thành phần web rất giống với việc sử dụng phần tử HTML gốc. Dấu hiệu thực sự duy nhất cho biết phần tử này không phải là phần tử HTML gốc là dấu gạch nối nhất quán trong thẻ, dấu gạch nối này là tiêu chuẩn để biểu thị cho trình duyệt biết rằng đây là một Thành phần web.
Đóng gói kiểu DOM bóng
Tương tự như vậy, các phần tử HTML gốc có DOM tối và Thành phần web cũng có chức năng tương tự. Shadow DOM là một cây ẩn gồm các nút trong một phần tử. Cách tốt nhất để hình dung điều này là mở trình kiểm tra web và bật tuỳ chọn "Hiển thị cây Shadow DOM". Sau khi hoàn tất việc này, hãy thử xem xét phần tử đầu vào gốc trong trình kiểm tra. Bây giờ, bạn sẽ có tuỳ chọn để mở đầu vào đó và xem tất cả các phần tử trong đó. Bạn thậm chí có thể thử làm việc này với một trong các Thành phần web của chúng tôi – hãy thử kiểm tra thành phần đầu vào tuỳ chỉnh của chúng tôi để xem Shadow DOM của thành phần đó.
Một trong những ưu điểm (hoặc nhược điểm, tuỳ thuộc vào quan điểm của bạn) của Shadow DOM là đóng gói kiểu. Nếu bạn viết CSS trong Thành phần web, các kiểu đó sẽ không thể rò rỉ và ảnh hưởng đến trang chính hoặc các phần tử khác; chúng hoàn toàn nằm trong thành phần. Ngoài ra, CSS được viết cho trang chính hoặc Thành phần web mẹ không được phép rò rỉ vào Thành phần web của bạn.
Việc đóng gói các kiểu này là một lợi ích trong thư viện thành phần của chúng ta. Điều này giúp chúng tôi đảm bảo nhiều hơn rằng khi ai đó sử dụng một trong các thành phần của chúng tôi, thành phần sẽ trông như dự định, bất kể kiểu được áp dụng cho trang mẹ là gì. Để đảm bảo chắc chắn hơn, chúng ta thêm all: unset;
vào thư mục gốc, hay còn gọi là "máy chủ lưu trữ", của mọi Thành phần web.
Tuy nhiên, nếu ai đó đang sử dụng Thành phần web của bạn có lý do chính đáng để thay đổi một số kiểu nhất định thì sao? Có thể có một dòng văn bản cần độ tương phản cao hơn do bối cảnh hoặc đường viền cần dày hơn? Nếu không có kiểu nào có thể xuất hiện trong thành phần của bạn, làm cách nào để bạn có thể sử dụng các lựa chọn tạo kiểu đó?
Đó là lúc bạn cần đến Thuộc tính tuỳ chỉnh CSS.
Thuộc tính tuỳ chỉnh CSS
Thuộc tính tuỳ chỉnh được đặt tên rất phù hợp — đây là các thuộc tính CSS mà bạn hoàn toàn có thể tự đặt tên và áp dụng bất kỳ giá trị nào cần thiết. Yêu cầu duy nhất là bạn phải thêm hai dấu gạch nối vào đầu các từ khoá. Sau khi khai báo thuộc tính tuỳ chỉnh, bạn có thể sử dụng giá trị đó trong CSS bằng hàm var()
.
Khi nói đến tính kế thừa, tất cả các Thuộc tính tuỳ chỉnh đều được kế thừa, tuân theo hành vi điển hình của các thuộc tính và giá trị CSS thông thường. Bạn có thể sử dụng bất kỳ thuộc tính tuỳ chỉnh nào được áp dụng cho phần tử mẹ hoặc chính phần tử đó làm giá trị trên các thuộc tính khác. Chúng tôi sử dụng nhiều thuộc tính tuỳ chỉnh cho mã thông báo thiết kế bằng cách áp dụng các thuộc tính này cho phần tử gốc thông qua Khung CSS. Điều này có nghĩa là tất cả các phần tử trên trang đều có thể sử dụng các giá trị mã thông báo này, cho dù đó là Thành phần web, lớp trợ giúp CSS hay nhà phát triển muốn lấy một giá trị từ danh sách mã thông báo của chúng tôi.
Khả năng kế thừa Thuộc tính tuỳ chỉnh bằng cách sử dụng hàm var()
là cách chúng ta xuyên qua Shadow DOM của Thành phần web và cho phép nhà phát triển có nhiều quyền kiểm soát chi tiết hơn khi tạo kiểu cho các thành phần của chúng ta.
Thuộc tính tuỳ chỉnh trong thành phần Nord Web
Bất cứ khi nào phát triển một thành phần cho hệ thống thiết kế, chúng tôi đều thận trọng tiếp cận CSS của thành phần đó – chúng tôi muốn hướng đến mã tinh gọn nhưng rất dễ bảo trì. Mã thiết kế mà chúng tôi đã xác định là Thuộc tính tuỳ chỉnh trong Khung CSS chính của chúng tôi trên phần tử gốc.
Sau đó, các giá trị mã thông báo này được tham chiếu trong các thành phần của chúng ta. Trong một số trường hợp, chúng tôi sẽ áp dụng giá trị trực tiếp trên thuộc tính CSS, nhưng đối với các trường hợp khác, chúng tôi sẽ xác định một Thuộc tính tuỳ chỉnh theo ngữ cảnh mới và áp dụng giá trị cho thuộc tính đó.
Chúng ta cũng sẽ trừu tượng hoá một số giá trị dành riêng cho thành phần nhưng không có trong mã thông báo và biến chúng thành Thuộc tính tuỳ chỉnh theo ngữ cảnh. Các thuộc tính tuỳ chỉnh theo ngữ cảnh của thành phần mang lại cho chúng ta hai lợi ích chính. Trước tiên, điều này có nghĩa là chúng ta có thể "khô" hơn với CSS vì giá trị đó có thể được áp dụng cho nhiều thuộc tính bên trong thành phần.
Thứ hai, việc này giúp trạng thái thành phần và các thay đổi về biến thể trở nên rõ ràng hơn – bạn chỉ cần thay đổi thuộc tính tuỳ chỉnh để cập nhật tất cả các thuộc tính đó khi bạn tạo kiểu cho trạng thái di chuột hoặc trạng thái đang hoạt động hoặc trong trường hợp này là một biến thể.
Nhưng lợi ích mạnh mẽ nhất là khi xác định các Thuộc tính tuỳ chỉnh theo ngữ cảnh này trên một thành phần, chúng ta sẽ tạo một loại CSS API tuỳ chỉnh cho mỗi thành phần mà người dùng của thành phần đó có thể khai thác.
Ví dụ trước cho thấy một trong các Thành phần web của chúng ta có Thuộc tính tuỳ chỉnh theo ngữ cảnh được thay đổi thông qua bộ chọn. Kết quả của toàn bộ phương pháp này là một thành phần cung cấp đủ tính linh hoạt về định kiểu cho người dùng trong khi vẫn kiểm tra được hầu hết các kiểu thực tế. Ngoài ra, chúng ta (với vai trò là nhà phát triển thành phần) có thể chặn những kiểu mà người dùng áp dụng. Nếu muốn điều chỉnh hoặc mở rộng một trong các thuộc tính đó, chúng ta có thể thực hiện mà không cần người dùng thay đổi bất kỳ mã nào.
Chúng tôi nhận thấy phương pháp này cực kỳ hiệu quả, không chỉ đối với chúng tôi (những người tạo thành phần hệ thống thiết kế), mà còn đối với nhóm phát triển khi họ sử dụng các thành phần này trong sản phẩm của chúng tôi.
Tận dụng Thuộc tính tuỳ chỉnh
Tại thời điểm viết bài, chúng tôi không thực sự tiết lộ những Thuộc tính tuỳ chỉnh theo ngữ cảnh này trong tài liệu của chúng tôi. Tuy nhiên, chúng tôi dự định sẽ làm như vậy để nhóm phát triển lớn hơn của chúng tôi có thể hiểu và tận dụng các thuộc tính này. Các thành phần của chúng ta được đóng gói trên npm với một tệp kê khai, chứa mọi thông tin cần biết về các thành phần đó. Sau đó, chúng tôi sẽ sử dụng tệp kê khai làm dữ liệu khi triển khai trang web tài liệu. Bạn có thể thực hiện việc này bằng cách sử dụng Eleventy và tính năng Dữ liệu toàn cầu của dịch vụ này. Chúng tôi dự định đưa các Thuộc tính tuỳ chỉnh theo ngữ cảnh này vào tệp dữ liệu tệp kê khai này.
Một khía cạnh khác mà chúng tôi muốn cải thiện là cách các Thuộc tính tuỳ chỉnh theo bối cảnh này kế thừa giá trị. Ví dụ: hiện tại, nếu muốn điều chỉnh màu của hai thành phần đường phân chia, bạn cần nhắm đến cả hai thành phần đó một cách cụ thể bằng bộ chọn hoặc áp dụng thuộc tính tuỳ chỉnh trực tiếp trên phần tử có thuộc tính kiểu. Điều này có vẻ ổn nhưng sẽ hữu ích hơn nếu nhà phát triển có thể xác định các kiểu đó trên một phần tử chứa hoặc thậm chí ở cấp cơ sở.
Lý do bạn phải đặt giá trị thuộc tính tuỳ chỉnh trực tiếp trên thành phần là vì chúng ta đang xác định các giá trị đó trên cùng một phần tử thông qua bộ chọn máy chủ lưu trữ thành phần. Mã thông báo thiết kế chung mà chúng tôi sử dụng trực tiếp trong thành phần sẽ truyền thẳng đến thành phần này, không chịu ảnh hưởng của vấn đề này và thậm chí có thể bị chặn trên các phần tử mẹ. Làm thế nào để chúng ta có thể tận hưởng những lợi ích tốt nhất từ cả hai thế giới?
Thuộc tính tuỳ chỉnh riêng tư và công khai
Thuộc tính tuỳ chỉnh riêng tư là một thuộc tính do Lea Verou tổng hợp. Đây là một Thuộc tính tuỳ chỉnh "riêng tư" theo ngữ cảnh trên chính thành phần đó, nhưng được đặt thành Thuộc tính tuỳ chỉnh "công khai" có phương án dự phòng.
Việc xác định Thuộc tính tuỳ chỉnh theo ngữ cảnh theo cách này có nghĩa là chúng ta vẫn có thể làm tất cả những việc đã làm trước đây, chẳng hạn như kế thừa các giá trị mã thông báo chung và sử dụng lại các giá trị trong toàn bộ mã thành phần; nhưng thành phần cũng sẽ kế thừa một cách linh hoạt các định nghĩa mới của thuộc tính đó trên chính thành phần đó hoặc bất kỳ phần tử mẹ nào.
Mặc dù có thể tranh luận rằng phương thức này không thực sự "riêng tư", nhưng chúng tôi vẫn cho rằng đây là một giải pháp khá tinh tế cho một vấn đề mà chúng tôi đang lo ngại. Khi có cơ hội, chúng tôi sẽ giải quyết vấn đề này trong các thành phần của mình để nhóm phát triển có nhiều quyền kiểm soát hơn đối với việc sử dụng thành phần, đồng thời vẫn được hưởng lợi từ các giới hạn an toàn mà chúng tôi đã áp dụng.
Tôi hy vọng bạn thấy thông tin chi tiết này về cách chúng tôi sử dụng Thành phần web với Thuộc tính tuỳ chỉnh CSS hữu ích. Hãy cho chúng tôi biết ý kiến của bạn. Nếu quyết định sử dụng bất kỳ phương pháp nào trong số này trong công việc của riêng mình, bạn có thể tìm thấy tôi trên Twitter @DavidDarnes. Bạn cũng có thể tìm thấy Nordhealth @NordhealthHQ trên Twitter, cũng như các thành viên còn lại trong nhóm của tôi. Họ đã nỗ lực để tập hợp hệ thống thiết kế này và triển khai các tính năng được đề cập trong bài viết này: @Viljamis, @WickyNilliams và @eric_habich.
Hình ảnh chính của Dan Cristian Pădure new