在進(jìn)行CSS設(shè)計時，需要遵循一些基本的指南來確保代碼的可讀性和可維護(hù)性。下面是一些CSS設(shè)計指南源代碼：

/* 避免使用過于具體的選擇器 */
.main .sidebar .widget h3 {
font-size: 16px;
}
/* 替代方案 */
.widget-title {
font-size: 16px;
}
/* 使用語義化的類名 */
.cta-button {
background-color: #007aff;
color: #fff;
padding: 10px 20px;
text-align: center;
}
/* 替代方案 */
.button-primary {
background-color: #007aff;
color: #fff;
padding: 10px 20px;
text-align: center;
}
/* 避免使用神奇數(shù)字 */
.element {
margin-right: 80px;
width: 67%;
}
/* 替代方案 */
.element {
margin-right: var(--element-margin-right);
width: var(--element-width);
}
:root {
--element-margin-right: 80px;
--element-width: 67%;
}
/* 避免嵌套層級過深 */
.main .sidebar .widget h3 {
font-size: 16px;
}
/* 替代方案 */
.widget-title {
font-size: 16px;
}

通過遵循這些指南，可以使CSS代碼更加易于理解和維護(hù)，并使樣式表更加靈活和可擴(kuò)展。