The odern CSS tricks that you should know

Hey!

Just I wanna to share my CSS techniques. I face a lot of colleagues don't know it. Maybe you too. I hope it will be interesting for you.

How to write CSS depending on the number of childs

The first solution

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

My solution

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

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

I had to define gap always. Even if the element has only one child element. We can avoid it with :has()! I did gap is applied if uia-control has a minimum 2 childs ?

Make changes in one place with custom properties

The first solution

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

.content {
  padding-top: 2rem;
}

My solution

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

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

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

Do you need to make an element with dependence on CSS of another element? You should use custom properties! It saves you from endless searches. Make changes in one place ?

CSS without order dependencies

The first solution

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

.heading {
  font-size: 1rem;
}

My solution

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

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

A problem with rule order with the same specificity is noticeable when we have one component with a few modifications. Folks, it can be avoided. CSS custom properties will help ?

Put media queries on a diet

The first solution

.intro__heading {
  font-size: 2rem;
}

.intro__description {
  font-size: 1rem;
}

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

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

My solution

.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;
  }  
}

We have to write a lot of rules by using media queries. It's why code inflates. Well, custom properties keep the code size ?

Сustom checkboxes are on steroids with :has()

The first solution

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

My solution

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

The next-sibling combinator has one disadvantage. It's broken if the order of elements is changed. :has smashes this issue ?

P.S. If you like it you'll get more by subscribing to my newsletter.

The above is the detailed content of The odern CSS tricks that you should know. For more information, please follow other related articles on the PHP Chinese website!