Sass：ネストのやりすぎ注意

Sassのネスト構造は非常に便利ですが、慣れてくるとつい下記のように長くなることがあります。

.classname {
    p {
    }
    a {
    }
    ul {
        li {
            div {
                a {

                }
            }
        }
    }
    .class1 {
        div {
            p {
            }
            a {
            }
        }       
    }
    .class2 {
        div {
            p {
            }
            a {
            }
        }
    }
    .classname2 & {
    }
}

上記はプロパティを省いて書いていますがプロパティが加われば当然長くなるので、下の方になると親のクラス名が見えなくなることも多々あり、ソースの可読性が下がってきます。

ましてや最後の「.classname2 &」といった親逆転のネストも入ると混乱しがちです。

下記のように、ある程度切りの良い箇所やリストなど階層が深くなりそうな箇所でネストを切ることでソースの可読性が増します。

.classname {
    p {
    }
    a {
    }
}
.classname ul {
    li {
        div {
            a {

            }
        }
    }
}
.classname .class1 {
    div {
        p {
        }
        a {
        }
    }
}
.classname .class2 {
    div {
        p {
        }
        a {
        }
    }
}