nknown CSS techniques

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 ?

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

The above is the detailed content of nknown CSS techniques. For more information, please follow other related articles on the PHP Chinese website!