在 TailwindCSS 和 UnoCSS 中，如何處理重復(fù)類的合并問題是否值得？

如何在tailwindcss 和unocss 中處理重復(fù)類的合并問題

在使用tailwindcss 和unocss 時(shí)，開發(fā)者可能會(huì)遇到一個(gè)常見問題，即如何合并屬性值完全相同的重復(fù)類名，從而減少生成的css 文件體積。舉個(gè)例子，假設(shè)我們有h-10、before:h-10、after:h-10、focus:h-10 和hover:h-10 這幾個(gè)類，它們的屬性值都是height: 2.5rem。然而，打包后的css 文件中，這些類可能會(huì)被分別生成，如下所示：

.h-10, .hover:h-10:hover {   height: 2.5rem; } .focus:h-10:focus {   height: 2.5rem; } .before:h-10:before {   height: 2.5rem; } .after:h-10:after {   height: 2.5rem; }

隨著項(xiàng)目的發(fā)展，css 變得越來越復(fù)雜，這種重復(fù)的屬性會(huì)導(dǎo)致文件體積顯著增加。理想情況下，我們希望能夠?qū)⑦@些重復(fù)的類合并成一個(gè)統(tǒng)一的樣式規(guī)則，如下所示：

.h-10, .hover:h-10:hover, .focus:h-10:focus, .before:h-10:before, .after:h-10:after {   height: 2.5rem; }

那么，如何實(shí)現(xiàn)這種合并呢？實(shí)際上，對(duì)于這個(gè)問題，我們并不需要過度考慮這種微小的優(yōu)化。幾十個(gè)字節(jié)的差距相對(duì)于網(wǎng)頁中的視頻和圖片動(dòng)輒幾十上百kb 的體積來說，實(shí)在是微不足道。因此，盡管從理論上看合并重復(fù)類是一個(gè)優(yōu)化點(diǎn)，但在實(shí)際應(yīng)用中，這種優(yōu)化帶來的收益非常有限，不值得我們花費(fèi)時(shí)間和精力去實(shí)現(xiàn)。