在編譯時刪除無用的ID

我真正喜歡LESS的一個特性是嵌套規則。它使樣式表更加清潔，您可以快速找到元素。在編譯時刪除無用的ID

我想知道編譯時是否有一個選項來優化選擇器。例如...

#global { 
    /* Styles here maybe */ 

    .container { 
    /* Styles here maybe */ 

    #sidebar { 
     /* Styles here maybe */ 

     .title { 
     font-weight: bold; 
     } 
    } 
    } 
}

將被編譯爲#global .container #sidebar .title { font-weight: bold; }。

但前兩個選擇器沒用，因爲#sidebar應該在我的頁面中是唯一的。

有沒有辦法讓LESS將其編譯爲#sidebar .title { font-weight: bold; }而不是？

來源

2014-09-19 Samuel Bolduc

你的建議是不正確的;這樣的選擇器對於排除其中外部ID不在其中的內部頁面或狀態是有用的。 – SLaks 2014-09-19 15:36:32

此外，指定多個ID可能會提高規則的優先級，以防還有一個'#myTitle {font-weight：300; }'屬性（只有一個ID）。當你和像我這樣的ID癡迷開發人員一起工作時，有這些功能是很有用的。 – Katana314 2014-09-19 15:37:51

LESS不能假定在給定頁面中'＃sidebar'總是以'#global .container＃sidebar'出現，即使它在該頁面內是唯一的，這就是爲什麼它不會嘗試通過以下方式刪除前兩個選擇器：默認。但真正的問題是，爲什麼你要把它放在那裏呢？這看起來更像是一個創作錯誤，而不是預處理器的限制。 – BoltClock 2014-09-19 15:37:54

你的假設是錯誤的，CSS中的多個ID是多餘的。試想一下，作爲一個例子，在CMS生成的頁面類型到輸出，就像它的聯繫頁面網站：

<body id="contact"> 
    <section id="content">Blah</section> 
</body>

按照你的邏輯，以下CSS的一塊將是「優化的候選對象'：

#contact #content { 
    background:red; 
}

但是，現在您的主頁有<body id="home">當然在這個想象的CMS。突然你的主頁內容會出現紅色背景，因爲你決定錯誤地將這個#contact選擇器從CSS中優化出來，而根據這個規則它肯定不應該有紅色背景。

所以不行，LESS不能做到這一點，因爲它會破壞代碼。如果你不想想要的選擇器，不要使用它們，也不要把它們放在你的代碼中。

來源

2014-09-19 15:39:15

或者將內部規則集移出，如果您需要外部規則組合。 – BoltClock 2014-09-19 15:44:38

其他答案，包括接受的答案，已經令人信服地解釋了爲什麼LESS不能以您想要的方式簡化嵌套選擇器。

其實，SASS有能力做到這一點：

#global { 
    .container { 
     @at-root #sidebar { 
      .title { 
       font-weight: bold;

的@at-root指令基本上忽略了所有的更高築巢選擇。我不知道LESS是否有類似的東西。上述編譯成簡單

#sidebar { 
    .title { 
     font-weight: bold;

但是有一個更深層次的問題在這裏，從一個事實，即在你的「愛」嵌套規則更少。別那麼愛他們。我不瞭解你，但是大多數人喜歡嵌套規則，因爲他們認爲完全模仿HTML的層次結構是很酷的。 SASS文檔甚至聲稱這是一個好處：

Sass將允許您以跟隨HTML相同視覺層次結構的方式嵌套您的CSS選擇器。

因此，與HTML的人，如

<div class="foo"> 
    <ul> 
     <li class="item">

寫不像

.foo { 
    ul { 
     li.item {

這是一個可怕的，可怕的想法，它使CSS的完全依賴的結構的結構HTML。如果您在HTML中更改一個嵌套級別，則CSS會中斷。通常，這種方法會與許多針對標籤名稱（如ul）定義的規則結合使用，而不是類名稱，這會加重依賴關係，因此在HTML中將ul更改爲ol會再次破壞規則。或者它與基於Bootstrap類的規則相結合，例如col-md-6，所以如果您將其更改爲col-md-4，則會再次出現問題。

對於HTML，CSS規則應該是正交。它們代表了不同的層面。它們代表着在整個和整個HTML中有選擇地應用的造型概念。

我猜測你寫

#global { 
    .container { 
     #sidebar { 
      .title { 
       font-weight: bold;

，因爲你是採用在LESS鏡像HTML結構的這種錯誤的想法。然後，您會注意到，這會編譯爲包含多個ID的選擇器，您認爲這些ID必須效率低下（儘管實際上效率很低）。你自己在你的LESS中寫入多餘的嵌套層次，然後抱怨他們可能會降低性能！

更糟的是，您已經將HTML結構的假設硬編碼到CSS中。這是無關緊要的，側邊欄碰巧落入global元素內的.container。所以不要寫它們。也許在某個時候，您決定將container類更改爲container-fluid。繁榮，即刻您的CSS斷裂。這個標題應該大膽地被包含在一個container類中，這在任何情況下都是一個佈局相關的類，它與樣式無關（或應該）無關，這有什麼意義呢？如果您要使用預處理器嵌套在您的CSS中複製HTML結構，請回頭編寫內聯樣式。至少這樣，當你改變你的HTML時，你只會有一個文件需要改變。

在設計CSS時，您應該認真考慮設計規則的問題，因爲您在編寫JS時需要考慮類和方法的設計。在這種情況下，你需要問自己：「什麼特徵說明我想要一些標題是大膽的情況？是什麼驅使的？大膽的本質是什麼？我用膽略來表達什麼？大膽表達的語義概念是什麼？」

假設您希望所有標題都是粗體。然後你只需簡單地說：

.title { font-weight: bold }

假設您只希望標題在側欄中顯示爲粗體。然後你只是這麼說：

#sidebar .title { font-weight: bold; }

我的建議是去冷火雞。在取款期間停止使用嵌套。用最小編寫規則編號的選擇器組件。重構您的類以具有語義名稱（如title-emphasis）。一旦你「清醒」，你可以回去謹慎使用較少的嵌套的能力時，它是有用的，比如也許懸停：

#boo { 
    color: red; 
    &:hover { 
     color: blue; 
    } 
}

這實際上是有用的，從寫#boo兩次可以節省您和組規則以易懂的方式呈現。

來源

2014-09-19 16:03:27

+1，值得加我的答案。 – 2014-09-20 01:09:43

在編譯時刪除無用的ID

回答

相關問題