使用有意义的名称
/* Bad */
.red{
color: red;
}
/* Good */
.error-text{
color: red;
}这里错误信息的文本颜色为红色，如果你将这个颜色名直接作为类名很快就会忘记哪种颜色是各种错误了。错误文本类的命名”error-text”更好，有意义，可读性也强。
使用简洁明了的名称
/* Bad */
.nav-link-selected{
color: #fff;
}
/* Good */
.active{
color: #fff;
}当你阅读代码时，这些短名称更容易理解，而且不需要翻阅代码库寻找它的含义。高亮的选项卡也是很常见的，将它设为”active”，并加上你想要的样式，更简单。
使用一致的命名准则
/* Bad */
.listItem{
width: 100px;
}
.listItemFirst{
width: 200px;
}
.listItemLast{
width: 300px;
}
.listItemImage{
float: left;
}
/* Good */
.list-item{
width: 100px;
}
.list-item.first{
width: 200px;
}
.list-item.last{
width: 300px;
}
.list-item img{
float: left;
}按照同样的约定组织命名，减少了维护工作。比如，大家的首个列表项会加上一个CSS类名”first”，最后一个列表项会加上CSS类名”last”，而每个列表项上的图像则使用CSS类名”img”来处理。这些细微的差别可能在最初看起来视而不见，但是随着时间的推移，他们在代码库中的使用通常会导致不一致和其他问题。