How to set default section padding safely without classes

Sections should have default block and inline padding, as my article about best section structure describes. The question is, how do we apply this default padding?

Well, you can’t do it like this:

section {
  padding-block: var(--section-padding-m);
  padding-inline: var(--gutter);
}
Code language: CSS (css)

Why? Because sometimes sections get nested in other sections. When a section is nested in another section, it shouldn’t really be structured like your main sections, nor should it be styled like them.

So, we need to style main sections without styling child sections, and we have to do that without labeling a section as a main section (like with a class).

Here’s my approach, and the approach I use in Automatic.css:

:where(section:not(section section)) {
  padding-block: var(--section-padding-m);
  padding-inline: var(--gutter);
}
Code language: CSS (css)

section:not(section section) does the work of only targeting main sections, because it excludes all sections that are children of other sections.

Finally, it’s wrapped in a :where() tag to remove its specificity since all the :not() drama gives this rule higher specificity than desired. This ensures the default only takes effect when no other rules are trying to dictate section behavior, even rules with very low specificity.