精靈圖是前端開發中常用的技術。它讓我們在一個圖片文件里集合多個小圖標，并通過CSS background-position 來將指定位置的小圖標拼接成完整的圖標。這個技術可以優化頁面加載速度，減少HTTP請求，提高用戶體驗。

而CSS連寫則是在復合選擇器的基礎上，將多個屬性以一條語句的形式寫在一起。這種寫法雖然有點不易讀，但可以大幅提高代碼的簡潔度和可讀性。

.icon {
width: 30px;
height: 30px;
background: url(sprite.png) no-repeat;
}
.icon-home {
background-position: 0 0;
}
.icon-about {
background-position: -30px 0;
}
/* 使用CSS連寫 */
.icon {
width: 30px;
height: 30px;
background: url(sprite.png) no-repeat;
}
.icon-home,
.icon-about {
background-size: 60px; /* sprite 圖片大小 */
}
.icon-home {
background-position: 0 0;
}
.icon-about {
background-position: -30px 0;
}

可以看到CSS連寫大幅減少了我們的代碼量，同時也讓代碼更加簡潔易讀。

但是需要注意的是，在使用CSS連寫時，需要嚴格遵循規范。不同的屬性之間需要用空格隔開，并且不可以有逗號分隔。

總的來說，精靈圖和CSS連寫是在前端開發中經常使用的技術，它們讓我們的代碼更加簡潔，優化了頁面的性能和用戶體驗，是我們值得掌握的技能。