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.
SOCIAL SHARE CARD GENERATOR