Ảnh hưởng của việc áp dụng tên lớp CSS không tồn tại

Question

Liệu nó có ảnh hưởng xấu đến hiệu suất của trình duyệt để gán tên lớp cho thuộc tính lớp css của phần tử nếu lớp không bao giờ thực sự được xác định?

Nó không phải là bất thường khi sử dụng tên lớp cho bộ chọn với JQuery. Tôi thường sử dụng một lớp mà chỉ được sử dụng để chọn các phần tử và không bao giờ thực sự định nghĩa lớp bất kỳ.

Tôi giả định hầu hết các trình duyệt sẽ tìm định nghĩa lớp css và bạn bằng cách nào đó có thể rút ngắn tìm kiếm nếu kiểu được xác định?

Tôi hiểu rằng các kiểu CSS được biên dịch cùng nhau trước khi các phần tử trang được hiển thị. Đây là lý do tại sao điều quan trọng là giữ tất cả các định nghĩa CSS lại với nhau và không chia chúng với các thẻ script vì nó khiến hầu hết các trình duyệt biên dịch lại CSS mỗi khi chúng được xen kẽ với các định nghĩa khác. Hàm ý của điều này có thể đủ nghiêm trọng để cho phép trang hiển thị trước khi áp dụng kiểu.

Tuy nhiên, trên thực tế, tôi đoán sự khác biệt hiệu suất giữa việc xác định hoặc không xác định lớp CSS là không đáng kể nếu có.

Answer 1

Cách đơn giản nhất để suy nghĩ về vấn đề này là hãy nhớ CSS được áp dụng cho HTML, không phải là HTML gọi selectors CSS.

Khi trình duyệt phân tích tệp CSS, trình duyệt sẽ đọc bộ chọn từ phải sang trái để xem vị trí áp dụng kiểu. Ví dụ .foo ul {} sẽ kiểm tra tất cả các thẻ ul trên một trang và sau đó kiểm tra xem chúng có nằm trong .foo không. Bởi vì nó được phân tích cú pháp theo cách này, các lớp thừa, không được sử dụng trong HTML của bạn không quan trọng. Nó chỉ kiểm tra các id và các lớp được chỉ định trong CSS.

Answer 2

Vì thuộc tính lớp là một thuộc tính HTML, nó có thể được chèn vào mà không có vấn đề gì nếu nó không được gọi bởi CSS hoặc Javascript. Nó có thể ngồi đó một cách hạnh phúc một cách vui vẻ mà không có tác dụng phụ. Nó không cần phải được chọn bởi CSS, nó có thể được sử dụng bởi JS một mình.

Bài viết này có thể giúp bạn hiểu thêm:

class (HTML attribute) @ sitepoint.com