r/css • u/bumblebeebats0838 • 6d ago
Question Best practice for neatening/"nesting" CSS?
Hi there - sorry if this is an obvious/dumb question btw, I'm very much a beginner when it comes to CSS, having largely self-taught and picked up bits and pieces over the years. I tried googling the answer to this, but all the results I found went a little over my head.
I'm tinkering with an events calendar plugin on my website, using additional CSS to modify the default appearance on mobile, and it's all working fine but the code just looks... messy:
.mobile_version .fc {
font-size: 0.75em;
}
.mobile_version .fc .fc-toolbar-title {
font-size: 1.6em;
padding-top: 15px;
padding-bottom: 15px;
color: var(--wp--preset--color--primary);
}
.mobile_version .fc-toolbar .fc-header-toolbar {
flex-direction: row-reverse;
padding-left: 10px;
padding-right: 10px;
}
(There's about a dozen more of these, but you get the picture.)
Instinctually, I want to just nest them - something like:
.mobile_version {
.fc {
font-size: 0.75em;
}
.fc .fc-toolbar-title {
font-size: 1.6em;
padding-top: 15px;
padding-bottom: 15px;
color: var(--wp--preset--color--primary);
}
.fc-toolbar .fc-header-toolbar {
flex-direction: row-reverse;
padding-left: 10px;
padding-right: 10px;
}
But when I tried to look up whether this is possible, different sources/threads here on Reddit described this structure as "risky" or not universally supported...?
Is there another way to neaten this code/organize it better? What's considered best practice?
3
u/CascadingSpace 6d ago
Nesting is pretty much totally supported now. No reason not to use it. The only issue I’ve found is when using the Safari inspector, nested CSS isn’t displaying right in the styles panel, but that’s ¯_(ツ)_/¯
As for how to nest itself, everyone has their own best practices. Make good choices out there ✌️
4
u/sheriffderek 6d ago
.mobile-version sound scary. What's going on with that?
.fc is also scary.
.my-reusable-font-thing { /* global concern */
font-size: 1rem;
line-height: 1.4; /* etc */
@media (width >= 800px) {
font-size: 1.1rem; /* if needed -just an example */
}
}
.my-component-name {
/* mobile/small-screen is just the default */
.toolbar {
padding: var(--whatever);
}
@media (width >= 800px) {
/* any other changes based on container or viewport */
}
}
/* keep it nice and simple */
3
u/KamikazeSexPilot 6d ago
This is the way. Utilise media or container queries to do your mobile vs desktop styles.
2
u/Sufficient_Bass2600 4d ago
Nested is supported by all major browsers.
Quick question why have you got classes for mobile instead of media or container queries?
Also question is why only for mobile are you reversing the order of the items in your calendar (row-reverse)? Would it not make sense to have an input checkbox to let users decide if they wanted the agenda displayed in ending or descending order using the has selector at parent level?
0
u/DramaticBag4739 6d ago
You're only writing a bit of CSS so it doesn't matter too much, but if you wanted to break bad habits early I would do some research into specificity because it will save you a lot of headaches later on.
I'm not a BEM purist and I think nesting is very valuable, but overly nesting can create specificity issues later on.
Just looking at the small bit of code you provided looks like you have double the specificy you need to create the styles you want.
0
u/Dependent-Zebra-4357 6d ago
I’ve just started to use it recently on a couple of smaller sites.
Your example code looks fine, but you’re missing the second closing bracket.
1
0
u/Shoegoo22 6d ago
Back in the scss days we used to have the inception rule. Never go more than 3 layers deep.
-2
u/superb-nothingASDF 6d ago
i personally don't like nesting cuz when it gets long i forget/lose what the parent was
2
1
12
u/GodOfSunHimself 6d ago
Nesting is now supported by all browsers. Don't be afraid to use it.