Nhóm nhiều bộ chọn CSS để cải thiện tốc độ tải
Hiệu quả là một yếu tố quan trọng trong một trang web thành công. Trang web đó phải hiệu quả về cách sử dụng hình ảnh trực tuyến . Điều này sẽ giúp đảm bảo rằng trang web hoạt động tốt cho khách truy cập và tải nhanh trên thiết bị của họ. Hiệu quả cũng phải là một phần của quy trình tổng thể của bạn, giúp bạn giữ cho tiến độ của trang web đúng giờ và ngân sách.
Cuối cùng, hiệu quả đóng một vai trò trong tất cả các khía cạnh của việc tạo ra trang web và thành công lâu dài, bao gồm cả các kiểu được viết cho các trang CSS của trang web đó. Việc có thể tạo các tệp CSS gọn gàng hơn, sạch hơn là lý tưởng và một trong những cách bạn có thể đạt được điều này là bằng cách nhóm nhiều bộ chọn CSS lại với nhau.
Bộ chọn nhóm
Khi bạn nhóm các bộ chọn CSS , bạn áp dụng cùng một kiểu cho một số phần tử khác nhau mà không lặp lại các kiểu trong biểu định kiểu của bạn. Thay vì có hai hoặc ba hoặc thậm chí nhiều quy tắc CSS hơn, tất cả đều làm điều tương tự (ví dụ, đặt màu của thứ gì đó thành màu đỏ), bạn có một quy tắc CSS duy nhất hoàn thành cho trang của mình.
Có một số lý do tại sao "nhóm các bộ chọn" này mang lại lợi ích cho một trang. Đầu tiên, bảng định kiểu của bạn sẽ nhỏ hơn và tải nhanh hơn. Phải thừa nhận rằng, các tờ định kiểu không phải là một trong những thủ phạm chính khi nói đến các trang tải chậm. Tệp CSS là các tệp văn bản, vì vậy thậm chí các trang CSS dài thực sự rất nhỏ, kích thước tệp khôn ngoan, khi so sánh với hình ảnh chưa được tối ưu hóa. Tuy nhiên, mỗi chút một chút, và nếu bạn có thể cạo một số kích thước của CSS của bạn và tải các trang đó nhanh hơn nhiều, đó luôn luôn là một điều tốt để làm.
Nói chung, tốc độ tải trung bình trên các trang web nhỏ hơn 3 giây; 3 đến 7 giây là trung bình, và hơn 7 giây chỉ là quá chậm. Những con số thấp có nghĩa là, để đạt được chúng với trang web của bạn, bạn cần phải làm tất cả mọi thứ bạn có thể! Đây là lý do tại sao bạn có thể giúp giữ cho trang web của bạn nhanh chóng bằng cách sử dụng bộ chọn CSS được nhóm.
Cách chọn nhóm CSS
Để nhóm các bộ chọn CSS cùng nhau trong biểu định kiểu của bạn, bạn sử dụng dấu phẩy để phân tách nhiều bộ chọn được nhóm theo kiểu. Trong ví dụ bên dưới, kiểu ảnh hưởng đến các phần tử p và div:
div, p {color: # f00; }Dấu phẩy về cơ bản có nghĩa là "và". Vì vậy, bộ chọn này áp dụng cho tất cả các phần tử đoạn VÀ tất cả các phần tử phân chia. Nếu dấu phẩy bị thiếu, thay vào đó nó sẽ là tất cả các phần tử đoạn văn là con của một bộ phận. Đó là một loại rất khác nhau của bộ chọn, vì vậy dấu phẩy này thực sự thay đổi ý nghĩa của bộ chọn!
Bất kỳ hình thức chọn nào cũng có thể được nhóm lại với bất kỳ bộ chọn nào khác. Trong ví dụ này, bộ chọn lớp được nhóm với bộ chọn ID:
p.red, #sub {color: # f00; }Vì vậy, kiểu này áp dụng cho bất kỳ đoạn nào có thuộc tính lớp là "đỏ", VÀ bất kỳ phần tử nào (vì chúng tôi không chỉ định loại nào) có thuộc tính ID của "phụ".
Bạn có thể nhóm bất kỳ số lượng bộ chọn nào với nhau, bao gồm các bộ chọn là các từ đơn và bộ chọn biên dịch. Ví dụ này bao gồm bốn bộ chọn khác nhau:
p, .red, #sub, div a: liên kết {màu: # f00; }Vì vậy, quy tắc CSS này sẽ áp dụng cho những điều sau:
- Bất kỳ phần tử đoạn nào
- Bất kỳ phần tử nào có lớp "đỏ"
- Bất kỳ phần tử nào có ID là "phụ"
- Lớp "liên kết" giả của các phần tử neo là các phần tử của một bộ phận.
Bộ chọn cuối cùng đó là bộ chọn hợp chất. Bạn có thể thấy nó dễ dàng kết hợp với các bộ chọn khác trong quy tắc CSS này. Với quy tắc đó, chúng tôi đang thiết lập màu # f00 (màu đỏ) trên 4 bộ chọn này, tốt hơn là viết 4 bộ chọn riêng biệt để đạt được cùng một kết quả.
Một lợi ích khác của việc chọn nhóm là, nếu bạn cần thực hiện thay đổi, bạn có thể chỉnh sửa một quy tắc CSS duy nhất thay vì nhiều quy tắc. Điều này có nghĩa là phương pháp này giúp bạn tiết kiệm thời gian và trọng lượng trang khi nói đến việc duy trì trang web trong tương lai.
Bất kỳ bộ chọn nào cũng có thể được nhóm
Như bạn có thể thấy từ các ví dụ trên, mọi bộ chọn hợp lệ có thể được đặt trong một nhóm và tất cả các phần tử trong tài liệu khớp với tất cả các phần tử được nhóm sẽ có cùng kiểu dựa trên thuộc tính kiểu đó.
Một số người thích liệt kê các phần tử được nhóm trên các dòng riêng biệt để dễ đọc trong mã. Sự xuất hiện trên trang web và tốc độ tải vẫn giữ nguyên. Ví dụ: bạn có thể kết hợp các kiểu được phân tách bằng dấu phẩy vào một thuộc tính kiểu trong một dòng mã:
th, td, p.red, div # firstred {color: đỏ; }
hoặc bạn có thể liệt kê các kiểu trên từng dòng để rõ ràng:
thứ,
td,
p.red,
div # firstred
{
màu đỏ;
}
Hoặc là phương pháp bạn sử dụng để nhóm nhiều bộ chọn CSS tăng tốc trang web của bạn và giúp quản lý các kiểu dài hạn dễ dàng hơn.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa bởi Jeremy Girard vào ngày 5/8/17.