Tại sao không sử dụng các biến CSS?
|
Khả năng sử dụng các biến trong CSS là một tính năng hữu ích và mạnh mẽ mà các nhà phát triển web đã yêu cầu từ lâu. Vâng, nó cuối cùng đã đến, và nó thật tuyệt vời. Trong bài viết này, chúng ta sẽ xem xét lịch sử, tầm quan trọng và cách sử dụng các biến CSS cũng như cách bạn có thể tận dụng chúng để giúp quá trình phát triển và bảo trì CSS của bạn nhanh hơn và dễ dàng hơn Show Lịch sử của các biến CSS hơi khó hiểu. Ban đầu được chỉ định bởi W3C vào năm 2012, tính năng này ban đầu chỉ được triển khai bởi Chrome và Firefox. Khi thông số kỹ thuật được cập nhật vào năm 2014 với một cải tiến đáng kể về cú pháp, Firefox đã tiếp tục và sửa đổi cách triển khai của nó, trong khi Chrome quyết định hủy bỏ các nỗ lực triển khai cho đến khi mọi thứ ổn định. Về phần mình, Microsoft đã huýt sáo và ngoảnh mặt làm ngơ Vào cuối tháng 9 năm 2015, caniuse. com đã báo cáo trình duyệt hỗ trợ các biến CSS ở mức thấp hơn 9%, như đã thấy ở góc trên bên phải của báo cáo này Tuy nhiên, vào năm 2016, trình duyệt Chrome, Safari, Opera và Android đều nhảy vào làn sóng thay đổi và đột ngột hỗ trợ tăng vọt lên 69%. (Đó là hỗ trợ toàn cầu; hỗ trợ chỉ ở Hoa Kỳ là 77%. ) Tốt hơn rồi đấy. Và như bạn có thể thấy từ báo cáo gần đây hơn, ngay cả Microsoft Edge cũng đang làm việc với nó. (Tôi biết, phải không?. ?) Vì vậy, các biến CSS giờ đây đã chính thức là Một Thứ Bạn Thực Sự Có Thể Sử Dụng. Hãy xem làm thế nào Giới thiệu biếnCác biến, bất kể chúng được sử dụng bằng ngôn ngữ nào, chỉ là các hộp được đặt tên chứa giá trị để sử dụng sau này. Trong biểu thức x = 3, x là tên biến và 3 là giá trị của biến. Giá trị có thể thay đổi hoặc thay đổi (nó là "biến", duh), nhưng giá trị hiện tại luôn có sẵn bằng cách chỉ cần tham khảo tên. Như vậy, nếu x = 3 thì biểu thức x + 2 ban đầu bằng 5; . Tên x luôn trả về giá trị hiện tại của biến, bất kể nó được sử dụng ở đâu và tần suất như thế nào Nhưng CSS là một ngôn ngữ khai báo, phù hợp với mẫu, không phải là ngôn ngữ theo thủ tục, theo từng bước, vậy tại sao lại sử dụng các biến trong CSS? . đơn giản, nhất quán và dễ bảo trì. Hãy nghĩ về từ viết tắt DRY - Đừng lặp lại chính mình. Bằng cách sử dụng các biến trong CSS, bạn có thể bản địa hóa các giá trị và đơn giản hóa quá trình phát triển ban đầu, thử nghiệm lặp lại và bảo trì sau này, tất cả chỉ trong một lần. Giá trị của các biến (xem những gì tôi đã làm ở đó?) Là đây. đặt nó một lần và nó được đặt ở mọi nơi; Nhưng chúng là biến hay thuộc tính?Đúng Các biến CSS được gọi đúng là "thuộc tính tùy chỉnh" và đó là một mô tả công bằng. Bạn gần như có thể gọi chúng là “thuộc tính không hợp lệ”, bởi vì ý chính của một biến CSS là nó là một thuộc tính có tên không tồn tại, một thuộc tính không có ý nghĩa gì đối với trình duyệt Nghĩa là, trong khi tên thuộc tính :root {8 được trình duyệt biết đến và có ý nghĩa cụ thể, thì tên thuộc tính :root {9 không được biết đến và không có ý nghĩa đối với trình duyệt. Trên thực tế, đó là một tên thuộc tính không hợp lệ… trừ khi đó là một biếnThuộc tính tùy chỉnh có các giá trị thông thường giống như thuộc tính thông thường, nhưng không giống như thuộc tính thông thường, giá trị của chúng có thể được sử dụng lại sau này bằng cách gọi chúng theo tên. Khả năng đó một mình làm cho họ hành động chính xác như các biến. Ngoài ra, như bạn sẽ thấy trong giây lát, chúng thậm chí còn được tham chiếu bằng cách sử dụng từ khóa table {0. dòng dưới cùng. mặc dù về mặt kỹ thuật chúng là “thuộc tính tùy chỉnh”, nhưng mọi người chỉ gọi chúng là biến CSS — ngay cả W3CVấn đềNgay cả một đoạn CSS tương đối đơn giản cũng có thể nhanh chóng trở nên lộn xộn và khó bảo trì. Nhiều cặp thuộc tính/giá trị cuối cùng sẽ được sao chép, vô tình hoặc cần thiết. Ví dụ: đối với mọi quy tắc mà bạn muốn đặt lề trái của một số phần tử thành 20px, bạn sẽ viết mã table {1. Nếu sau này bạn quyết định rằng lề trái 15px là tốt hơn, thì bạn phải thay đổi giá trị trong từng quy tắc. Đó là một vấn đề bảo trìHãy xem xét khối CSS nhỏ này sử dụng tên màu tiêu chuẩn table {2body { margin: 50px; padding: 20px; border: 5px solid darkcyan;Nếu tôi muốn thay đổi màu lục lam đậm lặp đi lặp lại đó thành màu cam chẳng hạn, tôi phải xem kỹ CSS và thay đổi thủ công ba - không, đợi đã - bốn lần. Và, trên thực tế, điều gì sẽ xảy ra nếu các quy tắc đó không liền kề thuận tiện trong CSS thực của tôi như trong ví dụ trên, mà thay vào đó cách nhau vài chục hoặc vài trăm dòng? Tôi biết bạn đang nghĩ gì. chỉ cần thực hiện tìm kiếm toàn cầu và thay thế. Và chắc chắn, nó hoạt động tốt nếu bạn nhất quán 100% với mã của mình. Nhưng trong khi tên thuộc tính CSS phân biệt chữ hoa chữ thường (sẽ nói thêm về điều đó sau), thì giá trị thuộc tính lại không. Vì vậy, cả table {2và table {4 sẽ hoạt động trong CSS của bạn, nhưng cả hai sẽ không được tìm thấy trong một thao tác tìm kiếm và thay thế. (Trên thực tế, với suy nghĩ đó, hãy xem lại khối CSS ở trên. Thực sự, đi trước. ) Hoặc còn các mã màu như table {5, table {6, table {7, table {8, table {9, hoặc thậm chí là :root { --my-value: 20; }0 thì sao? . Uh-oh, bây giờ thì sao?Các biến CSS, đó là những gì cú phápTuyên ngônNhớ lại rằng các biến CSS chỉ là các cặp thuộc tính/giá trị; . Điều hấp dẫn duy nhất là trình duyệt phải biết rằng tên thuộc tính "không hợp lệ" của bạn là có chủ ý chứ không phải lỗi đánh máy như "màu nền". (Chà, nếu tôi có một xu cho mỗi lần tôi nhìn thấy cái đó. ) Sự khác biệt đó được thực hiện bằng cách bắt đầu tên biến của bạn bằng hai dấu gạch ngang, e. g. , :root { --my-value: 20; }1, :root { --my-value: 20; }2, :root { --my-value: 20; }3. Thats tất cả để có nó; truy xuấtĐó là một nửa trận chiến; . Điều này được thực hiện với từ khóa table {0. (Nó trông giống như một lệnh gọi hàm bởi vì, nói một cách chính xác, nó là như vậy, nhưng tại sao lại là một lời gọi hàm?) Sử dụng ____2_______0 để yêu cầu trình duyệt truy xuất giá trị của một biến đã xác định trước đó và cắm nó vào giá trị thuộc tính thực tế, ví dụ:. g. , :root { --my-value: 20; }6À chính nó đấy?Chuẩn rồi. Đầu tiên, hãy khai báo các biến của bạn dưới dạng các cặp thuộc tính/giá trị trên bộ chọn, chẳng hạn như lớp giả :root { --my-value: 20; }7:root {Sau đó, truy xuất nội dung của các biến bằng cách tham chiếu tên của chúng dưới dạng giá trị thuộc tính trong các quy tắc sau này ở bất cứ nơi nào chúng cần table {Hãy xem xét
Không, thực sự PAQTất cả chúng ta đều quen thuộc với Câu hỏi thường gặp — Câu hỏi thường gặp — nhưng phần này chứa một số điều mà bạn có thể sẽ hỏi. Vì vậy… PAQ Q. Tôi có nên luôn sử dụng lớp giả :root { --my-value: 20; }7 làm bộ chọn để xác định các biến không?A: Not necessarily, but usually, as doing so serves a couple of purposes. First, it collects all your variables in one place for easy maintenance (especially if that’s the first rule in your CSS file), which is kind of the point. Second, :root { --my-value: 20; }7 matches the whole page (essentially everything in the element), so it makes all your variables global in scope.Q. Hmm, điều đó có nghĩa là tôi có thể đặt các biến giống hệt nhau với các giá trị khác nhau trong các quy tắc khác nhau để nhận các biến không toàn cầu, có phạm vi cụ thể? A. Đúng. Thông thường điều này là không cần thiết, nhưng có những trường hợp nó có ý nghĩa. Xem nội dung nâng cao, bên dưới Q. Các thuộc tính dựa trên biến có xếp tầng không? A: Yes, they are inherited like any other property. If you set a ’s background color with a variable, its children will all have that background color.
Q. Tên biến có phân biệt chữ hoa chữ thường không? A. Có, nhưng đừng để tôi bắt đầu với trường hợp. Các tên :root { --my-property: font-size; }0,:root { --my-property: font-size; }1, và :root { --my-property: font-size; }2 đều là các biến khác nhau và sẽ khiến bạn vui vẻ vô số giờ đau buồn gỡ lỗi. Hãy tiếp tục, sử dụng camelCase nếu bạn phải, nhưng đừng khóc với tôi khi quy tắc của bạn bị phá vỡQ. Tôi có thể sử dụng dấu gạch ngang hoặc gạch dưới trong tên biến không? A. Có, nhưng không phải khoảng trắng. Các tên :root { --my-property: font-size; }3, :root { --my-property: font-size; }4 và :root { --my-property: font-size; }5 đều là các biến hợp lệ, trong khi :root { --my-property: font-size; }6 tất nhiên là không. Trên thực tế, vì CSS là ngôn ngữ thân thiện với dấu gạch ngang và sử dụng dấu gạch ngang trong nhiều tên thuộc tính tiêu chuẩn, dấu gạch ngang được ưu tiên hơn dấu gạch dưới để có tính nhất quán và dễ đọc tên biếnQ. Tôi có thể sử dụng một biến cho nhiều giá trị thuộc tính — thậm chí hoàn toàn khác nhau — không? A. Có, miễn là giá trị hợp lệ. Ví dụ: bạn có thể xác định một biến có giá trị là 20px và sau đó sử dụng nó cho tất cả các loại thuộc tính sau này. lề, phần đệm, cỡ chữ, bất cứ thứ gì. Xem cách sử dụng kép của :root { --my-value: 20; }3 trong ví dụ trênQ. Được rồi, tôi có thể đặt một biến chỉ thành một giá trị số và sau đó sử dụng nó cho các loại thuộc tính khác nhau không? A. Không, bạn không thể “xây dựng” một giá trị bằng các số và đơn vị riêng biệt; . Ví dụ: điều này sẽ không hoạt động :root { --my-value: 20; }Q. Vậy thì, tôi có thể sử dụng một biến cho tên thuộc tính thay vì giá trị không? A. Tất nhiên là không; . Ví dụ, điều này hoàn toàn sẽ không hoạt động :root { --my-property: font-size; }Q. Tôi có thể sử dụng một giá trị biến để đặt một giá trị biến khác không? A. ừm, vâng. Tôi thực sự không thể nghĩ ra một trường hợp sử dụng tốt cho nó, nhưng nó hoạt động :root { --mybasecolor: red; }Q. Tại sao không chỉ sử dụng SASS, LESS hoặc một số bộ xử lý trước CSS khác cho các biến? A. Tại sao không chỉ sử dụng một chiếc xe trượt 12 pound để đập một con muỗi?. - Thỏa thuận với màu sắc là gì?Nhiều bài viết về biến CSS — và bài viết này cũng không ngoại lệ — chủ yếu dựa vào các ví dụ dựa trên màu sắc, đặc biệt là ở phần đầu. Điều này được thực hiện vì hai lý do tốt. Đầu tiên, thay thế màu sắc là một trường hợp sử dụng đơn giản, dễ nắm bắt; . Mặc dù cài đặt màu sắc không phải là cách duy nhất để sử dụng các biến, nhưng đó là cách mà hầu hết các tác giả CSS lần đầu tiên thử nghiệm với chúng Hãy xem xét một số ví dụ thực tế, trong thế giới thực bằng cách sử dụng các biến, cả liên quan đến màu sắc và không liên quan đến màu sắc. Màu nổi bật nhất quánHãy tưởng tượng bạn có một trang web mà bạn muốn sử dụng một màu duy nhất cho các hiệu ứng làm nổi bật phần tử khác nhau. giả sử, bảng ngựa vằn, đánh dấu khoảng, nền blockquote và tiêu điểm trường đầu vào. Bạn có thể mã hóa màu đánh dấu trong từng quy tắc ảnh hưởng đến các phần tử, đặt các quy tắc vào đúng vị trí của chúng và kiểm tra trang web của bạn. Nó có thể trông giống như thế này Tuy nhiên, nhìn vào nó, bạn không hào hứng với màu vàng pastel như bạn nghĩ, và quyết định sử dụng một màu nổi bật khác. Tất nhiên, bây giờ bạn phải tìm mã màu trong mọi trường hợp mã màu được sử dụng trong CSS của bạn — và một lần nữa, các quy tắc có thể không ở đâu gần nhau — và thay đổi nó, hy vọng bạn không bỏ sót hoặc mắc lỗi đánh máy. Thay đổi, phá vỡ, lặp lại. ừ Hoặc, bạn chỉ có thể đặt một biến thành giá trị màu gốc và sử dụng biến đó trong các quy tắc thực tế, như thế này :root { --hilitecolor: #ffffe0; } /* pastel yellow */Bây giờ, khi bạn muốn thay đổi màu tô sáng ở mọi nơi nó được sử dụng trong trang, bạn chỉ cần thay đổi một khai báo biến mà không cần chạm vào chính các quy tắc và tất cả các phần tô sáng sẽ thay đổi theo. Vẫn không hài lòng với màu sắc? . Dễ như ăn bánh Bàn ngựa vằnBàn ngựa vằn và các mặt hàng thường sử dụng một lần khác gây ra một vấn đề thú vị. Nếu bạn chỉ định xác định một hoặc hai quy tắc sử dụng một biến, thì tại sao lại sử dụng một biến? Đó là một câu hỏi tuyệt vời, và câu trả lời tuyệt vời là. dễ dàng bảo trì. Các quy tắc xác định màu nền xen kẽ của bảng ngựa vằn có thể nằm sâu trong CSS của bạn, do đó khó tìm và duy trì, nhưng nếu bạn khai báo các biến màu của mình trên bộ chọn :root { --my-value: 20; }7 và đặt khai báo đó ở đầu biểu định kiểu, thì bạn . Đây là một ví dụ sử dụng đánh dấu cả hàng chẵn và hàng lẻ:root { --zebraevencolor: lightgreen;Bây giờ, cho dù hai quy tắc :root { --my-property: font-size; }9 ở đâu, bạn không cần phải đi tìm chúng nữa. Chỉ cần thay đổi các giá trị màu được xác định trong hai biến ở đầu CSS và bạn đã hoàn tấtHoán đổi màu liên kết khi di chuộtĐây là trường hợp sử dụng một lần chỉ được tạo cho các biến. Một số nhà phát triển (ahem) muốn hoán đổi màu liên kết nền trước và nền sau khi người dùng di chuột qua liên kết văn bản. Kỹ thuật đơn giản này làm cho các liên kết “nổi bật” một cách trực quan, nhưng vì nó sử dụng các màu hiện có (ngược lại) nên nó không làm mất đi bảng màu của trang. Hoặc, bạn có thể sử dụng tổ hợp màu tương phản với sơ đồ trang để thêm hiệu ứng. Đây là giao diện của nó với màu xanh lam và trắng Điều này nghe có vẻ đơn giản, nhưng việc viết mã chính xác là điều hoàn toàn cần thiết, cả ban đầu và — ồ, làm ơn, không. — nếu bạn muốn thay đổi màu sắc sau này. Trong lược đồ này, quy tắc lớp giả :root { --mybasecolor: red; }0 và :root { --mybasecolor: red; }1 sử dụng tiền cảnh cho tiền cảnh và hậu cảnh cho hậu cảnh, nhưng quy tắc lớp giả :root { --mybasecolor: red; }2 và :root { --mybasecolor: red; }3 sử dụng nền cho tiền cảnh và tiền cảnh cho hậu cảnh. Hiểu chưa?Tức là, có tám thuộc tính và giá trị màu sắc trong các quy tắc “đơn giản” đó và nếu bạn mắc sai một lỗi nào — và bạn sẽ làm thế — thì việc tìm và sửa chúng cũng chẳng thú vị gì. Tuy nhiên, nếu bạn đặt màu bằng các biến, thì việc thay đổi màu sau đó mà không cần nhìn vào các quy tắc là một miếng bánh dễ dàng. Tất cả chỉ cần hai biến :root { --linkfg: #000080; Sau khi bốn quy tắc được mã hóa bằng các biến :root { --mybasecolor: red; }4 và :root { --mybasecolor: red; }5, chúng sẽ tốt mãi mãi. Như với các ví dụ ở trên, chiến thuật này giúp đơn giản hóa rất nhiều việc điều chỉnh màu sắc nhiều lần cho đến khi bạn có được sự kết hợp ưng ý.
Giá trị nhiều phầnHãy nhớ lại chúng tôi đã đề cập trước đó về cách các biến có thể nhận bất kỳ giá trị hợp lệ nào; . Hãy thử một ví dụ Đổ bóng là một tính năng tuyệt vời, nhưng chúng thường yêu cầu một chút thử và sai để sử dụng đúng. Rốt cuộc, có bốn thành phần cho một cái bóng. bù ngang, bù dọc, bán kính mờ và màu. Giả sử bạn có một trang mà bạn muốn các thành phần văn bản và đồ họa khác nhau có bóng giống hệt nhau, nhưng bạn không thực sự muốn dành mười tám giờ tới để chỉnh sửa từng thành phần trong nhiều quy tắc rải rác về CSS của mình để đảm bảo rằng chúng . Các biến CSS để giải cứu Chỉ cần thiết lập một biến chứa giá trị đa phần “bóng tiêu chuẩn” của bạn và mã hóa tất cả các quy tắc bóng để sử dụng biến đó. Bạn muốn tinh chỉnh nó, kiểm tra nó, thay đổi nó sau này? :root { --stdshadow: 3px 3px 5px #A0A0A0; }Và thì đấy, những cái bóng nhất quán trừ đi sự thất vọng Chủ đề (AKA Giữ tiếp thị hạnh phúc)Phần mở rộng hợp lý của tất cả điều này là sử dụng các biến không chỉ cho cài đặt thụt lề hoặc màu không thường xuyên mà còn sử dụng chúng như một cách để đặt — và quan trọng hơn là duy trì — các tập hợp giá trị quan trọng hoạt động cùng nhau, chẳng hạn như màu sắc, lề Các chủ đề dựa trên biến có thể hữu ích không chỉ cho sự tỉnh táo của chính bạn mà còn giúp giữ hòa bình giữa các bộ phận, chẳng hạn như khi đại diện tiếp thị nói một cách hữu ích, “Không, không phải màu xanh đó, màu xanh này. ” Bất kể ai yêu cầu thay đổi hoặc tại sao, bạn có thể kiểm tra nó một cách nhanh chóng và dễ dàng mà không cần lưu trữ nhiều bản sao “đề phòng” của toàn bộ CSS của bạn. Chỉ cần giữ một khối biến đại diện cho chủ đề thử nghiệm của bạn và một khối khác là chủ đề dự phòng của bạn, nhận xét về dự phòng và điều chỉnh Ví dụ: thậm chí không cần nhìn thấy trang áp dụng các khối chủ đề này, bạn có thể dễ dàng hình dung nó sẽ trông khác như thế nào khi một hoặc một bộ biến khác được áp dụng :root {0Nếu chủ đề thử nghiệm không phù hợp với bạn, bạn có thể nhận xét về chủ đề đó và khôi phục chủ đề dự phòng cho đến khi chủ đề đó được khắc phục. Một lần nữa, bạn không cần phải tìm và sửa đổi các quy tắc riêng lẻ, bao giờ. Đó là sức mạnh của các chủ đề dựa trên biến Chỉ một điều nữa Nói về dự phòng, có một điều nữa bạn nên biết. giá trị dự phòng. Hàm table {0 có một tham số tùy chọn thứ hai sẽ tiếp quản nếu độ phân giải biến không thành công vì bất kỳ lý do gì (chẳng hạn như, ồ, tôi không biết, lỗi camelCase?. ?)Tương tự như ngăn xếp phông chữ cho phép trình duyệt khôi phục từ lệnh gọi phông chữ không hợp lệ, các giá trị dự phòng cho phép các quy tắc của bạn khôi phục từ một biến không hợp lệ. Chúng đơn giản để viết mã và hoàn toàn có thể tiết kiệm thịt xông khói của bạn khi có sự cố xảy ra. Sau tham chiếu biến trong giá trị thuộc tính, chỉ cần thêm dấu phẩy và giá trị sẽ được sử dụng làm giá trị dự phòng nếu biến không giải quyết chính xác, như thế này :root {1Trong các div :root { --mybasecolor: red; }9, tham chiếu đến biến :root { --hilitecolor: #ffffe0; } /* pastel yellow */0 thành công và ngay cả khi không thành công, giá trị dự phòng khớp với giá trị biến dự định, vì vậy nó sẽ luôn luôn đúng. Tuy nhiên, tham chiếu đến biến :root { --hilitecolor: #ffffe0; } /* pastel yellow */1 sẽ không thành công — Tôi khá chắc là bạn biết tại sao — vì vậy giá trị dự phòng sẽ thay thế giá trị biến chưa được giải quyếtTrên thực tế, ví dụ thứ hai đó thể hiện một cách tiếp cận sáng tạo và khá hữu ích đối với các dự phòng thay đổi. sử dụng các giá trị thái quá như một công cụ sửa lỗi. Trong ví dụ này, bạn sẽ mong đợi văn bản div có màu xanh đậm, nhưng thay vào đó, nó sẽ hiện ra màu đỏ — một dấu hiệu rõ ràng rằng biến không thể giải quyết. Tìm con lạc đà phiền phức đó, giết nó bằng lửa và kiểm tra lại. Ah, văn bản màu xanh đậm nội dung nâng caoPhạm viHãy xem lại khái niệm về phạm vi. Phạm vi phổ biến nhất của các biến CSS là toàn cầu, nghĩa là chúng có sẵn cho bất kỳ quy tắc CSS nào và do đó cho bất kỳ phần tử HTML nào. Nhưng có những trường hợp bạn có thể muốn giới hạn phạm vi để đơn giản hóa việc bảo trì và cập nhật trang Xem xét một trang HTML có nhiều khối nội dung, mỗi khối chứa một loạt bài báo ngắn, trong đó các bài viết thuộc các nhóm hoặc phần logic khác nhau. HTML cơ bản có thể trông giống như thế này :root {2Các lớp phần sẽ được CSS sử dụng để đặt các thuộc tính khác nhau, do đó, các bài viết trong một phần trông giống nhau, nhưng khác với các bài viết trong các phần khác. Đó là, mỗi phần có giao diện riêng hoặc chủ đề nhỏ Bạn có thể suy luận từ cấu trúc rằng các bài viết có thể sẽ được chuyển từ phần này sang phần khác khi chúng cũ hơn và nội dung mới được thêm vào. Đây sẽ là một nhiệm vụ bảo trì khá dễ dàng; . Nhưng chúng sẽ trông như thế nào khi được di chuyển? . ) To keep things simple, let’s just play with the color and size of the s in the articles, but bear in mind that we might modify many other properties of the various article elements as well — text size, font, images, shadows, margins, backgrounds, link appearance, etc. — in order to visually distinguish among the sections. Here’s some CSS.--bgcolour: #ffffd0; --bqindents: 40px; --warningtextsize: 125%; } |
