.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),很难做到很好的重用。
大家都咋写的,有没有好的建议,学习方法。
现在编代码,遇到的瓶颈之一,就是各种变量的命名上面,搞搞就词穷了。尽管看了很多大神的代码,但实际自己写的时候,还是词穷。
尤其是业务代码。
对于命名层次,可以参考 BEM 规范,但是最好不要超过 2 层。
对于常见单词可以参考国内一些团队的开发推荐规范