如果dom結構很深 如何使less寫的更加優雅 層級不會過多

前端

css

less

---

可以嵌套寫，不等於你一定要嵌套寫啊……

.a {
color: #666;
.b {
.c {
color: #ccc;
}
}
}


如果 .a .b .c 里 .a 不是必要的，完全可以直接寫成：

.a {
color: #666;
}

.b {
.c {
color: #ccc;
}
}


不能因為寫了 Less 就不會寫 CSS 了吧……因為樣式是反映設計意圖的，如果某一級選擇器在設計上不是必須的，那麼也就沒有必要強行以這個結構來管理了吧。

---

我們有一個不成文的規定，不要超過四層嵌套，不然就重構

超過四層嵌套，意味著你要選擇一個很深的元素，這時候你必須有所行動

1. 利用全局樣式規範

全局樣式可以做很多規範，影響很多同類的元素。比如全局定義的 normalize 就可以影響非常多的樣式。如果只想局部作用，那麼第一層用模塊 class 約束再定義 tag 或 class。

2. 儘可能的用預編譯器的語法

可以用 less 的 extend 或 mixin，目的也是提取公用邏輯

3. 簡化 HTML 結構

在一個模塊里，寫四層以上的嵌套結構也不少了，是不是能再抽象模塊里的子模塊？

總之就是能抽象就抽象，不能抽象打回去重寫，哈哈。

---

如果dom結構很深 如何使less寫的更加優雅 層級不會過多

1. 後代選擇器會增加樣式權重，造成樣式權重越來越高的惡性循環
2. 濫用 less sass 的嵌套寫法會讓代碼不易於閱讀

發一下我們 CSS 命名規範的片段，我們是通過命名規範解決上面2個問題的。

/* 模塊代碼均以 .m- 作為前綴 */
.m-box {
border: 1px solid #CCC;
background-color: #EEE;
}
.m-box-hd {
line-height: 30px;
border-bottom:1px solid #CCC;
}
/* .m-{模塊名}-{子元素}-{子元素} */
/* 不要去糾結 className 太長，防止樣式衝突和降低CSS權重比 className 太長更重要 */
.m-box-hd-title {
font-size: 28px;
}
.m-box-bd {
font-size: 12px;
background-color: white;
}
/* .m-{模塊名}--{狀態} */
html .m-box--on {
border-color:orange;
background-color: #FFF1D9;
}
html .m-box--on .m-box-hd {
border-bottom-color: orange;
}
/* 選擇器前加 html 是為了提高狀態的CSS權重 */


HTML

&基礎& &
&
&title&
& &
text
& &

&高亮& &
&
&title&
& &
text
& &

---

不建議使用過多層級的嵌套，固執的嵌套或者不間斷的繼承會生成大量的代碼，估計這不是你想要的結果。當你確認你這個class只用到一個組件或者場景，應儘可能只用一個 class，而不是無限級嵌套

---

BEM，自己百度，不謝

---

我個人的做法是在我認為該跳出的地方，使用混合宏來保持跳出，但又不影響在css中的層級的顯示關係。

首先定義：

@mixin root($name) {
@at-root .#{$name} {
@content;
}
}


然後:

@include root(video-player) {

@include root(video-player-core) {

}

@include root(video-player-bar) {

.e-volume{}
.e-play{}
.e-fullscreen{

@include root(fullscreen-xxx) {

.x-date{}
.x-test{}
}
}
}
}


這裡scss中顯示的層級和HTML中的層級完全對應：

div.video-player
div.video-player-core
div.video-player-bar
span.e-volume
span.e-play
div.e-fullscreen
div.fullscreen-xxx
b.x-date
p.x-test


編譯後的css：

.video-player {}
.video-player-core {}
.video-player-bar {}
.video-player-bar .e-volume {}
.video-player-bar .e-play {}
.video-player-bar .e-fullscreen {}
.fullscreen-xxx {}
.fullscreen-xxx .x-date {}
.fullscreen-xxx .x-test {}


---

不一定要層層嵌套吧

---

推薦閱讀：