更少和更少的巢狀

應該組織乙個**。這就是事實，我認為這是乙個很好的有關巢狀的文字的開頭。

因此... css用於描述以標記語言編寫的文件的表示形式。在css上需要檢查的文字很少，例如css中的位置，文字下劃線和相對單位。我們每個人對此都很熟悉，並且知道您首先需要乙個選擇器來檢測乙個元素，然後是樣式。

為了選擇所需元素的最佳方法，我們應該使用有選擇器的所有技巧。但是，css不允許巢狀，並且必須分別選擇每個元素。換句話說，如果有子元素，則應與父元素完全分開定義。

less和sass是css預處理器，它們以有價值的方式擴充套件css語言。他們提供的眾多改進之一只是一種更簡單，更自然的方法來定義巢狀元素及其在巢狀元素之間的相對位置！

巢狀使**易於閱讀，擴充套件和維護。這是乙個選項，具有較少的解釋和比較簡單的解釋，因此下乙個解釋對於它們兩者都是通用的。

乙個例子將說明一切（然後以防萬一，我將作解釋）：

較少/無禮：

.grandparent

.child2{}

.child3{}

}

.parent2

.child2{}

}

css：

.grandparent .parent1 .child1{}

.grandparent .parent1 .child2{}

.grandparent .parent1 .child3{}

.grandparent .parent2 .child1{}

.grandparent .parent2 .child2{}

因此，預處理器使您可以使用與html中相同的結構，而不是用同一行（css語法）定義帶有空格的子元素。因此，如果child3元素是parent1的子代，而parent1是祖父母的子代，則所有定義均與此相同。

作為開發人員，我充滿了最佳實踐和建議，以下是其中的乙個。巢狀~~應該~~必須用於偽類，因為它是必須的。

要定義元素的特定狀態，有必要在選擇器旁邊新增偽類，並帶有巢狀，這是超直觀的-只需將＆符放在偽類旁邊。巢狀時，`&`總是引用父選擇器。除了這種用法之外，它可以（但不必要）在子選擇器旁邊使用，但可以使用`_`。

.child

}

如果＆符位於巢狀子元素的旁邊，則將其編譯為double類選擇器。

少/無禮

.child

}

的css

.child.grandchild{}

深度巢狀（實際上是推薦的）有其缺點-很難重用，覆蓋和擴大css檔案，但是使用它的開發人員已經意識到了這一切，這不是問題（相信我）。

使用所有可用的功能，以使您的**編寫體驗盡可能快速，輕鬆。巢狀自然是其中之一，因此請盡量使用它！

from: