[分享]css共同样式的命名

在编写CSS的过程中，命名共同样式是非常关键的一个部分。命名共同样式是指，将多个元素拥有相同的样式属性统一命名，使得CSS代码更加整洁，易于维护。/ 不使用命名共同样式 / p{ fontsize: ...

在编写CSS的过程中，命名共同样式是非常关键的一个部分。命名共同样式是指，将多个元素拥有相同的样式属性统一命名，使得CSS代码更加整洁，易于维护。

/* 不使用命名共同样式 */
p{
  font-size: 14px;
  color: #333;
}
h1{
  font-size: 24px;
  color: #666;
}
a{
  font-size: 16px;
  color: #f00;
}

/* 使用命名共同样式 */
.text{
  font-size: 14px;
  color: #333;
}
.title{
  font-size: 24px;
  color: #666;
}
.link{
  font-size: 16px;
  color: #f00;
} 

可以看到，使用命名共同样式后，CSS代码更加的简洁明了，不仅可以提高代码的可读性，也可以方便后期的维护和修改。

但是，在使用命名共同样式时，需要注意以下几点：

1. 命名要具有语义化，不仅让人容易理解，也可以提高搜索引擎对网页的理解。
2. 命名要简洁明了，尽量减少冗余字符。
3. 命名要避免使用元素名称作为前缀，以免后期代码修改时出现问题。

通过合理地命名共同样式，可以提高CSS代码的可维护性和可读性，让代码更加的优雅高效。