css命名代码 |css箭头效果

/*在CSS中使用有意义的类名*/
/*不良写法*/
.blue{color:blue;}
/*良好的写法*/
.text-primary{color:blue;}
/*使用BEM命名*/
/*不良写法*/
.card{width:300px;}
.card-title{font-size:20px;}
/*良好的写法*/
.card{width:300px;}
.card__title{font-size:20px;}
/*不要使用单个字母作为类名*/
/*不良写法*/
.b{color:black;}
/*良好的写法*/
.bold{font-weight:bold;}
/*不要使用数字或特殊符号作为类名*/
/*不良写法*/
.1{font-size:12px;}
.!.bold{text-decoration:underline;}
/*良好的写法*/
.small{font-size:12px;}
.underline{text-decoration:underline;}
/*不要使用超过3个单词的类名*/
/*不良写法*/
.text-primary-bold-underline{color:blue;font-weight:bold;text-decoration:underline;}
/*良好的写法*/
.text-primary-bold{color:blue;font-weight:bold;}
.text-primary-underline{text-decoration:underline;}
/*命名空间*/
/*不良写法*/
.text-primary{color:blue;}
.btn{color:red;}
/*良好的写法*/
.text--primary{color:blue;}
.btn--primary{color:red;}
/*避免嵌套选择器*/
/*不良写法*/
.card .card__title{font-size:20px;}
/*良好的写法*/
.card__title{font-size:20px;}

遵循CSS命名代码的最佳实践可以提高你代码的可维护性和可读性，不仅可以帮助你自己更好地理解自己的代码，也可以使其他人更容易地维护和扩展你的代码。