CSS選擇器優化

我正在研究如何優化css性能，並想知道它們是否是一個將複雜選擇器轉換爲更簡單的選擇器的現有工具。CSS選擇器優化

該工具將查看所有css規則並創建包含所有適當屬性的唯一單路徑選擇器。它會比查看每個dom節點並搜索任何css匹配，並且如果找到了某個節點，它會將簡化的選擇器添加到該節點。所呈現的CSS僅包含簡化版本，並且html仍然具有原始類/ ID，因此現有設置不會中斷。

一個誇張的例子說明我的意思：

#original { 
 
    padding: 5px; 
 
    background: blue; 
 
} 
 
#original .nav { 
 
    font-size: 24px; 
 
} 
 
#original .nav ul { 
 
    background: black; 
 
} 
 
#original .nav ul li { 
 
    list-style-type: none; 
 
} 
 
#original .nav ul li a { 
 
    text-decoration: none; 
 
    color: green; 
 
} 
 

 
#simplified { 
 
    padding: 5px; 
 
    background: blue; 
 
} 
 
._ranClass1 { 
 
    font-size: 24px; 
 
} 
 
._ranClass2 { 
 
    background: black; 
 
} 
 
._ranClass3 { 
 
    list-style-type: none; 
 
} 
 
._ranClass4 { 
 
    text-decoration: none; 
 
    color: green; 
 
}

<div id="original"> 
 
    <h1>Original CSS</h1> 
 
    <div class="nav"> 
 
    <ul class="_ranClass2"> 
 
     <li><a href="/">Link 1</a> 
 
     </li> 
 
     <li><a href="/">Link 1</a> 
 
     </li> 
 
     <li><a href="/">Link 1</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div id="simplified"> 
 
    <h1>Simplified CSS</h1> 
 
    <div class="nav _ranClass1"> 
 
    <ul class="_ranClass2"> 
 
     <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a> 
 
     </li> 
 
     <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a> 
 
     </li> 
 
     <li class="_ranClass3"><a href="/" class="_ranClass4">Link 1</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

這當然需要大量的調整，比好可能導致更多的麻煩，但不知道是否這樣的事情存在。

編輯：

我不是在尋找一個方式來寫更方便CSS，SASS/SCSS存在這個原因。我正在尋找一種在瀏覽器方面優化CSS的方法。 EX：取原選擇

#original .nav ul li a { 
    text-decoration: none; 
    color: green; 
}

簡化太

._ranClass4 { 
    text-decoration: none; 
    color: green; 
}

而不是瀏覽器尋找每一個「A」節點，然後檢查以確保父母匹配，它只是如果節點匹配有類._ranclass4

來源

2015-11-24 user3023421

你看過Rails的標準SCSS嗎？ –

是的，但不是SCSS只是一個預處理器，呈現爲普通的css，它不一定會優化它？ – user3023421

這是真的......我以爲你的目標是減少選擇器的長度以實現可讀性。我現在明白你在看性能......誤解了你的問題。 –

我會避免你在你的例子中做什麼。你的選擇器不應該太羅嗦，但對他們來說也有一定程度的描述，這樣你就知道他們的預期目的是什麼。

您可能想要閱讀BEM以及其他可以幫助組織和加速編寫CSS的CSS方法。

你也可能在尋找像CSSO或另一個吞嚥/咕嚕任務。 CSSO有一個你明確需要的功能，來解析你的標記並從你的CSS中刪除無用的選擇器。要小心，如果在某些JS腳本中有DOM修飾符，則可能遇到CSSO從CSS中移除這些選擇器的問題，因爲在該任務運行時，它們不存在於您的標記中。

Here是關於其他CSS優化方法的好文章。

來源

2015-11-24 20:47:23 Plummer

有趣，以前從未聽說過CSSO，感謝您的鏈接！ – user3023421

CSS選擇器優化

回答

相關問題