Bạn có nên sử dụng bộ chọn chung trong css không?

*.module {  }

*.module {  }

Một cách sử dụng phổ biến là trong thiết lập lại toàn cầu, như thế này

* {
  margin: 0;
  padding: 0;
}

Đôi khi việc sử dụng bộ chọn chung được ngụ ý. Ví dụ

*.module {  }

hoàn toàn giống như

.module {  }

Và trên thực tế, tính đặc hiệu của chúng hoàn toàn giống nhau, vì bộ chọn phổ không giữ giá trị đặc hiệu nào cả

Bộ chọn chung cũng được sử dụng với “không gian tên chung”. Nó hơi kỳ lạ, vì vậy tôi sẽ để bản demo đơn giản này tự nói lên

Khi chọn các phần tử, nếu chúng ta chỉ sử dụng dấu hoa thị (*) thì tất cả các phần tử của trang HTML sẽ được chọn bất kể quan hệ cha-con. Nếu chúng ta sử dụng dấu hoa thị (*) trong khi chọn con của một phụ huynh cụ thể, thì chúng ta có thể chọn tất cả con của phụ huynh đó bằng cách.   

Bộ chọn chung CSS chọn bất kỳ loại thành phần nào trong trang HTML. Nó phù hợp với một yếu tố duy nhất. Dấu hoa thị ( tôi. e. "*" ) được sử dụng để biểu thị bộ chọn chung CSS. Dấu hoa thị cũng có thể được theo sau bởi một bộ chọn. Điều này hữu ích khi bạn muốn đặt kiểu cho tất cả các phần tử của trang HTML hoặc cho tất cả các phần tử trong một phần tử của trang HTML

Nhìn chung, phát triển web có một vấn đề thực sự với sự trung thực và suy nghĩ hợp lý. Có rất nhiều điều vô nghĩa mang tính mô phạm được quảng cáo là một thông lệ tốt, hoàn toàn dựa trên những “sự thật” được tạo ra không dựa trên bất kỳ cách thức, hình dạng hoặc hình thức nào trong thực tế

Một lời nói dối trắng trợn như vậy là ý tưởng rằng “bộ chọn phổ quát” - một dấu hoa thị đơn độc - chậm, khó hiểu, khó hiểu và tôi thậm chí đã thấy một vài người gọi nó hoàn toàn là xấu xa. Thẳng thắn mà nói, thật là một đống malarkey. Trên thực tế, tôi có những từ mạnh mẽ hơn cho nó, nhưng tôi đang cố gắng cư xử ở đây

Gần đây tôi đã thêm cái này vào phần đặt lại của mình

*, *:after, *:before { box-sizing:border-box; }

… vì tôi luôn thấy mô hình “đệm bên trong chiều rộng” có ý nghĩa hơn, ngay cả khi đó là “hành vi sai” của IE. Không phải lần đầu tiên tôi không đồng ý với W3C về điều gì đó

Tuy nhiên, gần như ngay lập tức tôi đã có hàng chục nhà phát triển khác nhau mất trí vì mọi ý định và mục đích la hét “Đừng sử dụng bộ chọn đó theo cách đó, nó chậm và khó hiểu. ”

Cũng như với những tuyên bố vô nghĩa hoang đường khác, chẳng hạn như “bộ chọn thẻ và bộ kết hợp chậm, thay vào đó hãy ném các lớp vào mọi thứ” Tôi nghi ngờ rằng nguyên nhân là do loại suy nhược tinh thần phổ biến đối với giáo dân khi những lời ngụy biện nghe có vẻ hay được coi là sự thật. Như tôi đã viết trong một trong những bài báo trước đây của mình, mọi người thường coi “tránh X trong trường hợp có Y” và biến đổi nó một cách kỳ diệu thành “Không bao giờ sử dụng X”. ”

Hãy xem nó là gì, tại sao mọi người nghĩ nó xấu, tại sao quá trình suy nghĩ đó lại sai và sau đó chứng minh điều đó bằng một số thử nghiệm

Trong CSS, nó chỉ sử dụng dấu hoa thị để nói “Tất cả”. Nhiều như bạn làm ở cấp độ đầu cuối với tên tệp. Ví dụ

* { color:red; }

Sẽ làm cho TẤT CẢ các phần tử HTML có màu đỏ. Nó cũng có thể được sử dụng như một bộ chọn con

main > * { flex:1 0 auto; }

Trong trường hợp đó, tất cả các phần tử con trực tiếp (what > ​​does trong CSS) của

*.module {  }

Đó là nó, đó là tất cả những gì nó làm. Đó thực sự là thứ trong hệ thống tệp máy tính được gọi là “ký tự đại diện”

Mọi người dường như có khái niệm về nó là vì bộ chọn áp dụng cho tất cả các phần tử, nên nó… tốt, được áp dụng cho mọi thứ cho dù nó có được sử dụng hay không. Áp dụng cho mọi thứ phải chậm hơn, phải không?

Giải pháp thay thế là nêu cụ thể chính xác vị trí và khi cần thiết. Điều này liên quan đến việc viết nhiều mã hơn, thường lặp đi lặp lại chính bạn ở mọi nơi và yêu cầu HƠN logic bên trong để nói rằng “thứ cụ thể này cần nó”

Điều gì dễ dàng hơn?

Tôi ví kiểu suy nghĩ sai lầm này giống như cách mọi người nghĩ rằng không khí thoát ra từ đáy quả bóng bay hoặc tên lửa là thứ đẩy nó về phía trước, trong khi thực tế là nó KHÔNG chống lại bất cứ thứ gì tạo ra lực đẩy thực sự. Không khí mở rộng bị mắc kẹt bên trong nó đẩy hướng khác là thứ đẩy nó về phía trước

Cũng có thể hạn chế những gì nó đang tìm kiếm với bộ kết hợp anh chị em và trẻ em. Ví dụ: nếu chúng tôi có một phần mà chúng tôi biết rằng mọi thứ sau H2 cần có phần đệm trên cùng

h2 ~ * { padding-top:1.5em; }

Đó là một phép gán con trực tiếp đơn giản, chúng tôi đã giới hạn phạm vi tìm kiếm của nó, vì vậy không có lý do gì nó lại chậm hơn so với việc trượt các lớp trên mọi thứ sau H2, hoặc thậm chí chỉ ra các thẻ có thể có ở đó

h2 ~ p,
h2 ~ ul,
h2 ~ ol,
h2 ~ table,
h2 ~ footer { padding-top:1.5em; }

Nếu bất cứ điều gì chúng tôi có thể nhanh hơn bởi vì nó ít mã hơn và ít quy tắc hơn

Như người ta thường nói, im lặng hoặc im lặng. Tôi đã tạo hai tệp HTML gồm 5 đoạn “lorem ipsum” lặp lại 500 lần. Trong một, chúng tôi sẽ sử dụng bộ chọn chung để đặt lại lề, phần đệm và đặt kích thước hộp thành hộp viền. Mặt khác, chúng ta có thể tiếp tục và nhắm mục tiêu thủ công tất cả các phần tử thích hợp theo tên của chúng. Trong cả hai, chúng tôi sẽ so sánh

*.module {  }

*.module {  }

CSS sẽ được đưa vào nội tuyến trong phần đánh dấu để loại trừ nguyên nhân có thể xảy ra bắt tay;

Bạn có thể lấy các tệp thử nghiệm của tôi tại đây.
https. // cắt mã. com/for_others/medium_articles/univeralSelector/

Hai bài kiểm tra trong Lighthouse gần như không thể phân biệt được với nhau

Sự khác biệt thực sự duy nhất giữa hai là cứ hai trong số ba lần chạy thử nghiệm thì cái phổ biến không hiển thị thời gian chặn nhưng đôi khi hiển thị 0. 9s LCP, trong khi trên mỗi lần chạy, phiên bản “bình thường” cho thấy thời gian chặn là 40 mili giây, nhưng nhất quán 100% trên mọi số khác. Do thiếu chi tiết trong đánh giá Ngọn hải đăng, đó là điều mà tôi coi là sai số

Với những gì Lighthouse nghĩ, các biểu đồ hiệu suất làm tôi ngạc nhiên

Sự khác biệt về kết xuất là rất lớn và qua nhiều lần chạy, các giá trị này dường như nhất quán. Việc phiên bản bộ chọn chung luôn nhanh hơn khoảng 40 mili giây có thể liên quan đến bất kỳ nguyên nhân nào gây ra "chặn" trên phiên bản bình thường. Trong trường hợp này, rõ ràng là cách tiếp cận của bộ chọn phổ quát đối với cùng một bố cục trên thực tế NHANH HƠN

Nhưng ngay cả khi chúng tôi coi đây là phúc âm, trên tài liệu dài 2500 đoạn 273k sử dụng bộ chọn và bộ kết hợp phức tạp, sự khác biệt chỉ là 40 mili giây. Ngay cả khi nó được đảo ngược, con số này không đáng kể đến mức không cần bận tâm

Chứng minh những gì tôi nghĩ về yêu cầu bồi thường… áp dụng chung sẽ nhanh hơn và dễ dàng hơn các trường hợp cụ thể

Để giải trí, tôi đã thêm một bài kiểm tra thứ ba bằng cách sử dụng cách tiếp cận ngớ ngẩn “hãy ném vào lớp mọi thứ”, chỉ để chế giễu những người thở bằng miệng đó. Tôi sẽ không lãng phí thời gian cho báo cáo về ngọn hải đăng, hãy nói số 0. 8 trở thành 0. 9. Biểu đồ hiệu suất

… cho chúng tôi biết mọi thứ chúng tôi cần biết về tuyên bố trong truyện cổ tích rằng ném các lớp vào mọi thứ bằng cách nào đó nhanh hơn, sạch hơn hoặc tốt hơn một cách kỳ diệu so với việc chỉ sử dụng bộ chọn và bộ kết hợp. Chỉ củng cố thêm những gì tôi đã nói trong bài viết trước về điều đó. Và tại sao tôi nghĩ rằng tất cả các khung giao diện người dùng đều là rác rưởi và những thứ như BEM là vô nghĩa

Chết tiệt, nó thất bại nặng nề, bạn gần như nghĩ rằng nó cần thêm 30k mã hay gì đó. Mẹo hay, nếu ai đó nói với bạn rằng nhiều HTML hơn sẽ làm cho trang của bạn “Nhanh hơn” hoặc “dễ bảo trì hơn” thì có khả năng họ sẽ vỗ mông cho qua chuyện.

Tôi nghi ngờ những tuyên bố về “tệ nạn” của bộ chọn phổ quát này đến từ một số “tên tuổi lớn” trong ngành đang nói xấu họ - tôi thậm chí có thể biết ai - và mọi người chỉ mù quáng nhắc lại tuyên bố đó mà không xác minh hoặc thậm chí thực sự nghĩ về nó

Không có bằng chứng nào chứng minh cho tuyên bố rằng bộ chọn phổ quát bằng cách nào đó là "xấu", vì vậy nếu bạn có một trường hợp sử dụng hợp lý.. bạn biết không?

Bạn có nên sử dụng bộ chọn chung?

Bộ chọn chung có chậm trong CSS không?

Loại bộ chọn nào nên tránh trong CSS?

Nên sử dụng bộ chọn CSS nào?