The 5 modern 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.

Comments

[Paul Fleury]

Great css tips !

.your-css-tips:valid::after {
  content: "cool !";
}

[Stas Melnikov]

Paul, Thank you! I have to say. Your code isn't good for accessibility. Please, don't put text inside the content property 😉

[Paul Fleury]

Stas, you're right, but sometimes we only want to talk to insiders 🥷🏻

[RioBrewster]

Even "insiders" - especially "insiders" - need to pay attention to accessibility.

[Philip]

These CSS techniques are great for improving code efficiency, especially using :has() and custom properties to avoid repetitive styles. For a more efficient workflow, EchoAPI can help automate API testing and management, saving you time while developing. This integration allows you to streamline API requests and responses alongside your CSS development.