İç içe geçmiş seçiciler performans etkisi ve LESS

Question

Bu konuda yaklaşık 1.5 saat boyunca okuyordum ve yine de kısa bir özet ve belirleyici cevabı bulamadım.

Tarayıcıları anladığım kadarıyla, CSS seçicilerini sağdan sola ayrıştır. Bunun gibi uzun bir CSS seçici anlamına

:

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

kod az verimli hatlarından biridir zamankinden SO burada görünür.

Her şeyden önce, bu konuda haklı mıyım? İkinci olarak, ben bu tür mamut seçicilerini kodladığım yuvalanmış tasarımlardan üreten LESS kullanarak zengin bir kullanıcı arayüzü tasarlıyorum.

Bu tür seçicilerin önüne geçmek için neler yapılabilir? Sadece sınıflara ve kimliklere güvenin mi? Ama sonra tekrar iç içe CSS yazamazsanız LESS kullanmanın amacı nedir?

Girişiniz için teşekkür ederiz.

Answer 1

Bu doğru. Tarayıcılar seçiciyi sağdan sola değerlendirir. li.pinfo-box'un içinde bir span bulmaya çalışacak ve böyle devam edecek.

LESS yazarken göze çarpan bir kural: 3-4 seviyesinden fazla yuva yapmayın.

Bu, seçicilerinizin büyümesini engelleyecek, LESS'deki yuvalama özelliğinden yararlanmaya devam edebilirsiniz.

"Yararsız" yuvalamaya iyi bir örnek, stil listeleridir.

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

o li bir ul içinde olması gerektiğini belirtmek için gerçekten gerekli mi: Bazen böyle seçicileri yazmak?

#wrapper .blog-post li

Bütün bunlar bilmek iyidir: Muhtemelen yeterli yazı olacak. AMA: Sitelerinizin performansını optimize etmeye çalışırken ilk karşılaştığınız şey bu değil. Bunun yerine biraz zaman harcamak yerine istek sayısını veya başka bir şeyi azaltın.

Answer 2

Seçici ayrıştırma ve eşleme, oldukça sıra dışı bir içeriğe sahip olmadığınız sürece büyük bir etken olabilir. Bakımlı olan her şeyi kullanmanızı öneririm ve testin performans konusunu gösterdiği noktaya kadar işi tamamlar. Sonra bir profilerden çıktım (OSX'de Enstrümanlar kullanaydım, ancak çoğu platform için uygun bir tane olmalıydı) ve tarayıcıya ekledim; Seçici eşleşmesi profilde yüksek görünürse, yavaş seçicilerin yerini daha hızlı olanlarla değiştirmeye bakın (kimlik seçiciler kesinlikle iyi bir bahistir).