写CSS怎么命名比较好,有什么规范吗?

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

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

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

尤其是业务代码。

阅读 1.9k
2 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题