DEV Community

Stas Melnikov
Stas Melnikov

Posted on

4

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 */
}
Enter fullscreen mode Exit fullscreen mode

My solution

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

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

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;
}
Enter fullscreen mode Exit fullscreen mode

My solution

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

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

.content {
  padding-top: var(--page-banner-height);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

My solution

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

.heading {
  font-size: var(--heading-font-size, 1rem);
}
Enter fullscreen mode Exit fullscreen mode

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;
  }  
}
Enter fullscreen mode Exit fullscreen mode

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;
  }  
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

My solution

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

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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (5)

Collapse
 
paulfleury profile image
Paul Fleury β€’ β€’ Edited

Great css tips !

.your-css-tips:valid::after {
  content: "cool !";
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
melnik909 profile image
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 πŸ˜‰

Collapse
 
paulfleury profile image
Paul Fleury β€’

Stas, you're right, but sometimes we only want to talk to insiders πŸ₯·πŸ»

Thread Thread
 
riobrewster profile image
RioBrewster β€’

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

Collapse
 
philip_zhang_854092d88473 profile image
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.

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay