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

Question

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

发布于
2021-01-28

.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)，很难做到很好的重用。

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

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

尤其是业务代码。

css 前端

html5 css3

阅读 1.9k

2 个回答

得票最新

唯一丶