Zagnieżdżony wpływ selektorów na wydajność i MNIEJ

Question

Czytałem przez ostatnie 1,5 godziny na ten temat i nadal nie mogłem znaleźć zwięzłej i decydującej odpowiedzi.

O ile zrozumiałem, przeglądarki analizują selektory CSS od prawej do lewej.

Oznacza to długi selektora CSS, takich jak ten:

.card .container .businesscard .pinfo li.pinfo-box span:first-child 

jest jednym z najmniej efektywnych linii kodu, aby kiedykolwiek pojawi się tutaj w SO.

Po pierwsze, czy mam rację w tej sprawie?

Po drugie, projektuję bogaty interfejs użytkownika za pomocą LESS, który ostatecznie produkuje tego rodzaju gigantyczne selektory z projektów zagnieżdżanych, które koduję.

Co można zrobić, aby uniknąć tego rodzaju selektorów? Polegasz tylko na zajęciach i identyfikatorach? Ale jaki jest cel używania LESS, jeśli nie możesz pisać zagnieżdżonych CSS?

Twoje dane są doceniane.

Answer 1

To prawda. Przeglądarki oceniają selektory od prawej do lewej. Spróbuje znaleźć span wewnątrz li.pinfo-box i tak dalej.

Jedna reguła dla folllow przy pisaniu LESS: nie zagnieżdżaj więcej niż 3-4 poziomów.

Zapobiegnie to powiększaniu się selektorów, a nadal będziesz mógł korzystać z funkcji zagnieżdżania w LESS.

Dobrym przykładem "bezużytecznego" zagnieżdżania jest stylizacja list. Czasami piszę selektorów tak:

#wrapper .blog-post ul, #wrapper .blog-post ul li

Czy to naprawdę konieczne, aby określić, że limusi być wewnątrz ul? Prawdopodobnie będzie to wystarczająco pisanie:

#wrapper .blog-post li

Wszystko to jest dobrze wiedzieć. ALE: To nie jest pierwsza rzecz, na którą warto zwrócić uwagę, próbując zoptymalizować wydajność swoich witryn. Poświęć trochę czasu, aby zmniejszyć liczbę żądań lub coś innego.

Answer 2

Plebowanie i dopasowywanie selektora prawdopodobnie nie będzie dużym czynnikiem, chyba że masz dość niecodzienną zawartość. Sugerowałbym użycie tego, co można konserwować i wykonywanie pracy, aż do momentu, w którym testowanie wykazuje problem z wydajnością. Potem wydostanę profilera (na OSXu użyłbym Instrumentów, ale na większości platform powinna być przyzwoita) i dołącz do przeglądarki; jeśli dopasowanie selektora ukazuje się wysoko na profilu, to spróbuj zastąpić selektory wolne szybszymi (selektory id są zdecydowanie dobrym zakładem).