CSS是前端開發(fā)中重要的技術(shù)之一，但如果不注意，樣式重復(fù)就會(huì)出現(xiàn)。下面介紹一些避免樣式重復(fù)的方法。

1. 使用變量

:root {
--main-color: #ff5500;
}
h1 {
color: var(--main-color);
}
button {
background-color: var(--main-color);
}

使用變量可以讓同一樣式在不同的元素中使用，且只需修改一次，即可在所有使用該變量的元素中生效。

2. 繼承屬性

.container {
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 2em; /* 繼承父元素的字體大小16px */
line-height: 1.2; /* 使用自身專屬的行高 */
}

使用繼承屬性可以將同一樣式應(yīng)用于父元素和子元素，子元素可以使用自身專屬的樣式，以達(dá)到避免代碼重復(fù)的目的。

3. 使用通用類

.text-center {
text-align: center;
}
.container {
margin: 0 auto;
width: 80%;
}
.title {
font-size: 24px;
font-weight: bold;
}
.title.text-center {
/* 通過通用類來實(shí)現(xiàn)居中標(biāo)題 */
}

使用通用類可以將多種樣式組合到一起，達(dá)到樣式重用的效果，還可以通過加入新的類來改變樣式。

以上是避免CSS樣式重復(fù)的幾種方式，希望對(duì)你有所幫助。