嵌套選擇器性能影響和LESS

我一直在閱讀過去1.5小時左右的這個，仍然找不到簡潔和果斷的答案。嵌套選擇器性能影響和LESS

據我瞭解，瀏覽器從右向左分析CSS選擇器。

這意味着長的CSS選擇如此：

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

是代碼效率最低線之一永遠出現在這裏在SO。

首先，我對這一個嗎？其次，我正在設計一個使用LESS的豐富UI，它最終從我編碼的嵌套設計中生成這種龐大的選擇器。

可以做些什麼來避免這種選擇器？依靠單獨的類和ID？但是如果你不能寫嵌套的CSS，那麼使用LESS的目的又是什麼？

您的輸入將被讚賞。

來源

2012-12-11 pilau

聽起來好像你已經過了複雜的選擇器。該選擇器中是否需要'.container'？如果'.container'不是它的祖先之一，你真的打算有'span：first-child'的樣式嗎？ – cimmanon

我明白了。我想我的嵌套太深了。 – pilau

奇怪的是，昨天剛剛提到了一個類似於Sass/SCSS的問題：http：// stackoverflow。com/questions/13805324 /它是如何在實踐中對巢穴選擇器在sass-scss – BoltClock

這是正確的。瀏覽器從右向左評估選擇器。它將嘗試在li.pinfo-box等內部找到span。

編寫LESS時的一條經驗法則是：不要嵌套超過3-4個關卡。

這會阻止您的選擇器增長到很大，而您仍然可以從LESS中的嵌套功能中受益。

「無用」嵌套的一個很好的例子是樣式列表。有時候我寫這樣的選擇：

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

真的有必要來指定li必須是ul裏面？這將可能是足夠的寫作：

#wrapper .blog-post li

所有這些都是很好的瞭解。但是：這不是嘗試優化網站性能時首先要深入探討的問題。花點時間降低請求數或其他的東西。

來源

2012-12-11 23:11:31 AntonNiklasson

感謝您的提示。我們目前還沒有工作網站，只能設計UI。你可能想在你的回答開始時更正「從左到右」:) – pilau

選擇器解析和匹配不太可能是一個很大的因素，除非你有非常不尋常的內容。我會建議使用任何可維護的工具並完成工作，直到測試顯示性能問題。然後，我會擺脫一個探查器（在OSX上我會使用儀器，但應該有一個體面的一個可用於大多數平臺），並將其附加到瀏覽器;如果選擇器匹配在配置文件中顯示高，然後考慮用更快的選擇器替換慢速選擇器（id選擇器絕對是一個不錯的選擇）。

來源

2012-12-11 23:12:57

這很有趣 - 我從未使用過這樣的工具。我會在Windows上尋找一個。謝謝！ – pilau

嵌套選擇器性能影響和LESS

回答

相關問題