CSS（Cascading Style Sheets）是一種用于網頁設計的樣式表語言，可以控制網頁元素的外觀和布局。下面就是一些關于CSS的雜點。

/* 1. 使用 !important 時，應該慎重使用 */
div {
color: red !important;
}
/* 2. 避免在復雜選擇器中使用 universial selector（*）*/
div * {
/* 這會匹配 div 中的所有元素，會降低渲染性能 */
}
/* 3. 讓元素垂直居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 4. 使用媒體查詢實現響應式設計 */
/* 設置屏幕寬度小于 768px 時的樣式 */
@media screen and (max-width: 768px) {
/* ... */
}
/* 5. 避免濫用嵌套選擇器 */
/* 不推薦的方式 */
.container .item .detail p {
/* ... */
}
/* 推薦的方式 */
.detail p {
/* ... */
}
/* 6. 設置元素不占用空間 */
.element {
position: absolute;
/* ... */
}
/* 7. 遵循 CSS 盒子模型 */
/* 設置元素寬度和高度時，應該加上 padding 和 border 大小 */
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid black;
}
/* 8. 使用 CSS 變量（CSS Variables） */
:root {
--primary-color: #F44366;
--secondary-color: #03A9F4;
}
.button {
color: var(--primary-color);
background-color: var(--secondary-color);
}
/* 9. 使用 flex 布局實現自適應布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
/* 10. 避免在 CSS 中使用 !important */
/* 可以使用 specificity 來覆蓋樣式，而不是使用 !important */
.container div {
color: red;
}
/* 更加具體的樣式 */
.container .item div {
color: blue;
}