CSS样式表里面怎样写类名比较好？

Question

第一种就是独立的类名 第二种就是一层一层的类名
我一直都是用第一种 感觉第二种类名可读性很差 改起来又麻烦 经常改别人的所以感觉很不方便 大家觉得那种好？

.user1{
     width: 750rpx;
     height:100vh   
}

.card_conter .card_a .header_box .header .img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    overflow: hidden;
    background: #f2f2f2;
    margin-right: 20rpx;
}

.card_conter .card_a .header_box .header .img image {
    width: 100%;
    height: 100%;
}

Answer 1

这不是哪个好的问题，而是权重的问题

假如题主你这三个选择器都是选中同一个元素，那么首先生效的是第三个，其次是第二个，最后是第一个

别人的css代码加了很多层，也许是为了提高权重

引一篇别人写的文章，css权重

css6大基础选择器：

a）、id选择器(#box{})
b）、类选择器(.box{})
c）、属性选择器(a[href="http://www.xxx.com"])
d）、伪类和伪对象选择器(:hoevr{}和::after{})
e）、标签类型选择器(div{})
f）、通配符选择器(*{})

CSS权重计算规则

a）、计算选择符中的id选择器的数量
    一个id选择器为一个a，一个a为100
    
b）、计算选择符中的类选择器、属性选择器以及伪类选择器的数量
    一个类选择器、属性选择器以及伪类选择器为一个b，一个b为10
    
c）、计算标签类型选择器和伪对象选择器的数量
    一个标签类型选择器、伪对象选择器为一个c，一个c为1
    
d）、忽略通配符选择器
    通配符选择器忽略不计

如果按上面的规则，你的三个选择器的权重分别为：

1. 10
2. 50
3. 51

Answer 2

他们之间应该是相互配合着使用。项目中不是每个元素都单独写一个css样式的，有很多元素是共用同一个样式，或者有相同的样式，这时候就是提取出相同的部分进行书写，当做一个基础样式，这可能是第一种。第一种简洁效率也高，但是他的权重不高，而且如果是一些基础(公共)样式的话，他的精准性不高，这样就需要再多写一些选择器，以便更精准的找到目标元素，这可能是第二种。即便是第二种，为了可读性也没必要写一大串，这会影响性能，写出3个左右(视具体情况)的关键类即可。如果不想这样一大窜的写，可以使用css预处理器如sacc、lass等

Answer 3

权重参考资料 https://developer.mozilla.org...优先级_2

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位： 选择器中包含ID选择器则该位得一分。
十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。