CSS是前端中比较重要的一门技术，我们在编写HTML页面时，经常需要使用CSS来美化页面布局。但是，在编写复杂的页面时，CSS的命名规则会变得非常重要。下面，我们将针对复杂页面的CSS命名规则进行详细介绍。

/* 页面整体样式 */
.page-wrapper {
width: 100%;
margin: 0;
padding: 0;
}
/* 头部 */
.header {
height: 80px;
background-color: #ccc;
}
.header-text {
font-size: 24px;
color: #fff;
}
.header-button {
float: right;
margin-right: 20px;
background-color: #f00;
color: #fff;
border-radius: 5px;
}
/* 主体 */
.main {
width: 100%;
margin: 0;
padding: 0;
}
.main-content {
width: 80%;
margin: 0 auto;
}
.main-text {
font-size: 18px;
line-height: 1.5;
color: #333;
}
.main-image {
width: 100%;
height: 300px;
margin-top: 40px;
}
/* 边栏 */
.sidebar {
width: 20%;
margin-left: 10px;
}
.sidebar-title {
font-size: 20px;
color: #f00;
}
.sidebar-list {
margin-top: 20px;
}
.sidebar-list-item {
margin-bottom: 10px;
}
/* 底部 */
.footer {
height: 60px;
background-color: #f00;
color: #fff;
}
.footer-text {
font-size: 14px;
text-align: center;
margin-top: 20px;
}

上述代码展示了一个复杂页面的CSS命名规则。可以看到，我们将页面分为了四个部分：头部、主体、边栏和底部。在每个部分内部，又根据实际需要设置了不同的命名规则。

具体而言，我们在页面整体样式中设置了.page-wrapper命名规则，用来控制整个页面的宽度、外边距和内边距。在具体的部分中，比如头部，我们设置了.header、.header-text和.header-button三个命名规则。其中，.header用来设置头部整体样式，.header-text用来设置头部文字的大小和颜色，.header-button用来设置头部按钮的样式。

这样的CSS命名规则，可以提高代码的可读性和可维护性。同时，在编写复杂页面时，也可以更加方便地进行样式管理。希望大家在编写HTML页面时，能够更加注重CSS命名规则的使用。