당신이 알아야 할 기존 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 */
}

다음 형제 조합자에는 한 가지 단점이 있습니다. 요소의 순서가 변경되면 깨집니다. :이 문제를 해결했나요?

추신 마음에 드셨다면 제 뉴스레터를 구독하시면 더 많은 정보를 얻으실 수 있습니다.

위 내용은 당신이 알아야 할 기존 CSS 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!