你应该知道的现代 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;
  }  
}

我们必须使用媒体查询编写很多规则。这就是代码膨胀的原因。那么，自定义属性可以保持代码大小吗？

自定义复选框使用 :has() 进行增强

第一个解决方案

.cb__input:checked + .cb__label::before {
  /* CSS of the custom checkbox is here */
}

我的解决方案

.cb:has(:checked) .cb__label::before {
  /* CSS of the custom checkbox is here */
}

下一个兄弟组合器有一个缺点。如果元素的顺序发生改变，它就会被破坏。 : 已经解决了这个问题吗？

P.S.如果您喜欢，订阅我的时事通讯您会得到更多。

以上是你应该知道的现代 CSS 技巧的详细内容。更多信息请关注PHP中文网其他相关文章！