CSS代码书写规范是编写高效且易于维护的前端代码的关键之一。以下是一些CSS代码的书写规范：
/* 使用ID或class选择器时，名称应该简洁明了 */
#main-content {
color: #333;
}
.header {
background-color: #fff;
}
/* 缩进两个空格，应使用小写字母，使用连字符连接单词 */
.nav {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
/* 为防止命名冲突，使用命名空间 */
.menu-list {
/* 以下为菜单列表样式 */
}
/* 子选择器与伪元素在新行上 */
.header::before {
content: "";
display: block;
}
/* 为提高可读性，使用空白符 */
.nav li a {
color: #333;
text-decoration: none;
}
/* 引用外部CSS文件时，文件名应该以小写字母命名，并且应该放在head标签的顶部 */
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* 在嵌套的选择器之间使用换行符 */
.header {
background-color: #fff;
.logo {
float: left;
}
.nav {
float: right;
}
}
/* 使用css前缀以保持样式可用性 */
.box-shadow {
-webkit-box-shadow: 0px 0px 8px #ccc;
-moz-box-shadow: 0px 0px 8px #ccc;
box-shadow: 0px 0px 8px #ccc;
}
/* 避免使用 !important，除非必要 */
.nav li a {
color: #333 !important;
}以上是CSS代码的书写规范。如果您遵循了这些规范，您的CSS代码将更加易于维护和拓展，同时也可以增强代码的可读性。