CSS是前端開發中必不可少的一部分，設計優雅的CSS代碼可以提高前端頁面的質量與用戶體驗。下面簡單介紹一些CSS設計模式，幫助大家優化自己的代碼。 第一個模式是“命名規范模式”，可以統一命名規范，易于團隊協作與維護。 例如： ```css .header { color: #333; } .nav { display: flex; justify-content: space-between; } .article { font-size: 16px; } ``` 第二個模式是“重用模式”，即通過類的繼承來避免代碼冗余和增加可重用性。 例如： ```css .btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } .btn-primary { background-color: #2196F3; color: #fff; } .btn-secondary { background-color: #eee; color: #333; } ``` 第三個模式是“層疊模式”，通過CSS的優先級，可以使代碼更加簡潔易懂。 例如： ```css .header { color: #333; background-color: #fff; } .header .logo { width: 100px; height: 40px; } .header .nav { display: flex; justify-content: space-between; } .header .nav li { list-style: none; } .header .nav li a { color: #333; text-decoration: none; } ``` 以上是三種基本的CSS設計模式，當然還有很多其他的模式可以使用。希望大家在編寫CSS代碼時，能夠運用這些模式，設計出高效優美的代碼。