未知的 CSS 技術

嘿！

只是我想分享我的 CSS 技巧。我面對的很多同事都不知道。也許你也是。我希望你會感興趣。

如何根據孩子的數量來寫CSS

第一個解

.uia-control {
  display: inline-flex;
  gap: 1rem;
  /* remaining CSS */
}

我的解決方案

.uia-control {
  display: inline-flex;
  /* remaining CSS */
}

.uia-control:has(> :nth-child(2)) {
  gap: 1rem;
}

我必須始終定義差距。即使該元素只有一個子元素。我們可以用 :has() 來避免它！如果 uia-control 至少有 2 個孩子，我是否應用了間隙？

使用自訂屬性在一處進行更改

第一個解

.banner {
  height: 2rem;
  position: fixed;
}

.content {
  padding-top: 2rem;
}

我的解決方案

:root {
  --page-banner-height: 2rem;
}

.banner {
  height: var(--page-banner-height);
  position: fixed;
}

.content {
  padding-top: var(--page-banner-height);
}

你需要讓一個元素依賴另一個元素的 CSS 嗎？您應該使用自訂屬性！它可以讓您免於無休止的搜尋。在一個地方進行更改？

沒有順序依賴的 CSS

第一個解

.heading_size-l {
  font-size: 2rem;
}

.heading {
  font-size: 1rem;
}

我的解決方案

.heading_size-l {
  --heading-font-size: 2rem;
}

.heading {
  font-size: var(--heading-font-size, 1rem);
}

當我們有一個組件進行一些修改時，具有相同特異性的規則順序問題就很明顯。各位，這是可以避免的。 CSS 自訂屬性會有幫助嗎？

減少媒體查詢

第一個解

.intro__heading {
  font-size: 2rem;
}

.intro__description {
  font-size: 1rem;
}

@media (width >= 641px) {
  .intro__heading {
    font-size: 3rem;
  }

  .intro__description {
    font-size: 2rem;
  }  
}

我的解決方案

.intro__heading {
  font-size: var(--intro-heading-font-size, 2rem);
}

.intro__description {
  font-size: var(--intro-description-font-size, 1rem);
}

@media (width >= 641px) {
  .intro {
    --intro-heading-font-size: 3rem;
    --intro-description-font-size: 2rem;
  }  
}

我們必須使用媒體查詢來寫很多規則。這就是程式碼膨脹的原因。那麼，自訂屬性可以保持程式碼大小嗎？

P.S.如果您喜歡，訂閱我的電子報您會得到更多。

以上是未知的 CSS 技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！