css - 是否在具有较少不良做法的类中附加类名？

Question

看看这个 LESS 代码:

#navbar {
    color: #fff;
    &Logo {
        color: #000;
        &:hover { color: #000; }
    }
}

...输出:

#navbar {
    color: #fff;
}
#navbarLogo {
    color: #000;
}
#navbarLogo:hover {
    color: #000;
}

上面的代码工作正常，但是 LESS 以这种方式组合类名或扩展类名是否是不好的做法？

另一个例子，如果你有 .button、.button-error、.button-success 或 .button- error-true 它会全部包含在主要的 .button LESS 调用之下吗？

Answer 1

我想如果你所做的只是改变样式属性的值，就像你的例子一样，如果你只是创建每个单独的样式 id、类或元素，那么阅读你的 .css 文件可能会更容易 -就像它在您的“输出”示例中读到的那样。

但是，如果您想添加属性(同时使用与之前相同的属性)，例如:

navbar {
    background-color: #000000;
    &Logo {
        color: #ffffff;
        &:hover { text-decoration: none; }
    }
}

我会说那会更有用。我的不是一个很好的例子，但是一旦你开始考虑具有多个属性的类/id——想想你是否有 9 个、10 个甚至更多——这就是这种技术变得有用的地方——不必为每个重复每一个class/id 只是另一个的扩展，我认为 LESS 开始变得真正有用​​。

只是我的意见 - 希望对您的元素考虑有所帮助。