写CSS怎么命名比较好，有什么规范吗？

Question

.cu-list.menu-avatar {
    overflow: hidden;
}

.cu-list.menu-avatar>.cu-item {
    position: relative;
    display: flex;
    padding-right: 10upx;
    height: 140upx;
    background-color: #ffffff;
    justify-content: flex-end;
    align-items: center
}

.cu-list.menu-avatar>.cu-item>.cu-avatar {
    position: absolute;
    left: 30upx
}

.cu-list.menu-avatar>.cu-item .flex .text-cut {
    max-width: 510upx
}

.cu-list.menu-avatar>.cu-item .content {
    position: absolute;
    left: 146upx;
    width: calc(100% - 96upx - 60upx - 120upx - 20upx);
    line-height: 1.6em;
}

.cu-list.menu-avatar>.cu-item .content.flex-sub {
    width: calc(100% - 96upx - 60upx - 20upx);
}

.cu-list.menu-avatar>.cu-item .content>view:first-child {
    font-size: 30upx;
    display: flex;
    align-items: center
}

.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
    display: inline-block;
    margin-left: 10upx;
    height: 28upx;
    font-size: 16upx;
    line-height: 32upx
}

.cu-list.menu-avatar>.cu-item .action {
    width: 100upx;
    text-align: center
}

.cu-list.menu-avatar>.cu-item .action view+view {
    margin-top: 10upx
}

.cu-list.menu-avatar.comment>.cu-item .content {
    position: relative;
    left: 0;
    width: auto;
    flex: 1;
}

我截取了一些别人写的css，个人感觉比我自己写的好多了，我写的时候，写写都词穷了，大家都怎么命名的。

例如这种，cu-list，menu-avatar，comment ，

我自己一般都是只要做一个样式，就重写一个class，一般都不用这种级联的写法(list.menu)，很难做到很好的重用。

大家都咋写的，有没有好的建议，学习方法。

现在编代码，遇到的瓶颈之一，就是各种变量的命名上面，搞搞就词穷了。尽管看了很多大神的代码，但实际自己写的时候，还是词穷。

尤其是业务代码。

Answer 1

对于命名层次，可以参考 BEM 规范，但是最好不要超过 2 层。

• BEM 101 | CSS-Tricks

对于常见单词可以参考国内一些团队的开发推荐规范

• ClassName命名 | Aotu.io - 前端代码规范
• 最佳实践 - CSS规范 - 规范 - NEC : 更好的CSS样式解决方案
• Code Guide by @AlloyTeam

Answer 2

可以装个BEM helper插件去检查你的命名是否规范并帮你纠正