Solved With :has(): Vertical Spacing in Long-Form Text | Style-Tricks

In the event you’ve ever labored on websites with a lot of long-form textual content — particularly CMS websites the place individuals can enter screeds of textual content in a WYSIWYG editor — you’ve seemingly needed to write CSS to handle the vertical spacing between completely different typographic components, like headings, paragraphs, lists and so forth.

It’s surprisingly tough to get this proper. And it’s one cause why issues just like the Tailwind Typography plugin and Stack Overflow’s Prose exist — though these deal with rather more than simply vertical spacing.

Firefox helps :has() behind the layout.css.has-selector.enabled flag in about:config on the time of writing.

What makes typographic vertical spacing sophisticated?

Absolutely it ought to simply be so simple as saying that every aspect — p, h2, ul, and so on. — has some quantity of high and/or backside margin… proper? Sadly, this isn’t the case. Take into account this desired habits:

• The primary and final components in a block of long-form textual content shouldn’t have any further house above or beneath (respectively). That is in order that different, non-typographic components are nonetheless positioned predictably across the long-form content material.
• Sections inside the long-form content material ought to have a pleasant huge house between them. A “part” being a heading and all the next content material that belongs to that heading. In observe, this implies having a pleasant huge house earlier than a heading… however not if that heading is straight away preceded by one other heading!

You must look no additional than proper right here at Type-Tips to see the place this might come in useful. Listed here are a few screenshots of spacing I pulled from one other article.

The standard resolution

The standard resolution I’ve seen entails placing any long-form content material in a wrapping div (or a semantic tag, if applicable). My go-to class identify has been .rich-text, which I feel I exploit as a hangover from older variations of the Wagtail CMS, which might add this class mechanically when rendering WYSIWYG content material. Tailwind Typography makes use of a .prose class (plus some modifier lessons).

Then we add CSS to pick all typographic components in that wrapper and add vertical margins. Noting, after all, the particular habits talked about above to do with stacked headings and the primary/final aspect.

The standard resolution sounds cheap… what’s the issue?

Inflexible construction

Having so as to add a wrapper class like .rich-text in all the fitting locations means baking in a particular construction to your HTML code. That’s generally needed, however it feels prefer it shouldn’t need to be on this explicit case. It may also be simple to overlook to do that in all places it’s good to, particularly if it’s good to use it for a mixture of CMS and hard-coded content material.

The HTML construction will get much more inflexible once you need to have the ability to trim the highest and backside margin off the primary and final components, respectively, as a result of they should be fast kids of the wrapper aspect, e.g., .rich-text > *:first-child. That > is vital — in any case, we don’t wish to by chance choose the primary listing merchandise in every ul or ol with this selector.

Mixing margin properties

Within the pre-:has() world, we haven’t had a solution to choose a component based mostly on what follows it. Subsequently, the standard strategy to spacing typographic components entails utilizing a mixture of each margin-top and margin-bottom:

1. We begin by setting our default spacing to components with margin-bottom.
2. Subsequent, we house out our “sections” utilizing margin-top — i.e. very huge house above every heading
3. Then we override these huge margin-tops when a heading is adopted instantly by one other heading utilizing the adjoining sibling selector (e.g. h2 + h3).

Now, I don’t learn about you, however I’ve at all times felt it’s higher to make use of a single margin course when spacing issues out, typically favoring margin-bottom (that’s assuming the CSS hole property isn’t possible, which it’s not on this case). Whether or not it is a huge deal, and even true, I’ll allow you to resolve. However personally, I’d somewhat be setting margin-bottom for spacing long-form content material.

Collapsing margins

Due to collapsing margins, this mixture of high and backside margins isn’t an enormous drawback per se. Solely the bigger of two stacked margins will take impact, not the sum of each margins. However… properly… I don’t actually like collapsing margins.

Collapsing margins are but yet another factor to concentrate on. It is likely to be complicated for junior devs who aren’t on top of things with that CSS quirk. The spacing will completely change (i.e. cease collapsing) should you have been to alter the wrapper to a flex structure with flex-direction: column as an illustration, which is one thing that wouldn’t occur should you set your vertical margins in a single course.

I more-or-less know the way collapsing margins work, and I do know that they’re there by design. I additionally know they’ve made my life simpler every so often. However they’ve additionally made it tougher different instances. I simply assume they’re kinda bizarre, and I’d typically somewhat keep away from counting on them.

The :has() resolution

And right here is my try at fixing these points with :has().

To recap the enhancements this goals to make:

• No wrapper class is required.
• We’re working with a consistent margin direction.
• Collapsing margins are prevented (which can or will not be an enchancment, relying in your stance).
• There’s no setting types after which instantly overriding them.

Notes and caveats on the :has() resolution

• At all times test browser help. At time of writing, Firefox only supports :has() behind an experimental flag.
• My resolution doesn’t embrace all attainable typographic components. For example, there’s no <blockquote> in my demo. The selector listing is simple sufficient to increase although.
• My resolution additionally doesn’t deal with non-typographic components which may be current in your explicit long-form textual content blocks, e.g. <img>. That’s as a result of for the websites I work on, we are likely to lock down the WYSIWYG as a lot as attainable to core textual content nodes, like headings, paragraphs, and lists. Anything — e.g. quotes, pictures, tables, and so on. — is a separate CMS element block, and people blocks themselves are spaced aside from one another when rendered on a web page. However once more, the selector listing might be prolonged.
• I’ve solely included h1 for the sake of completeness. I normally wouldn’t permit a CMS person so as to add an h1 through WYSIWYG, because the web page title could be baked into the web page template someplace somewhat than entered within the CMS web page editor.
• I’m not catering for a heading adopted instantly by the identical stage heading (h2 + h2). This is able to imply that the primary heading wouldn’t “personal” any content material, which looks like a misuse of headings (and, appropriate me if I’m incorrect, however it may violate WCAG 1.3.1 Info and Relationships). I’m additionally not catering for skipped heading ranges, that are invalid.
• I’m by no means knocking the present approaches I discussed. If and after I construct one other Tailwind website I’ll use the wonderful Typography plugin, no query!
• I’m not a designer. I got here up with these spacing values by eyeballing it. You in all probability may (and will) use higher values.

Specificity and challenge construction

I used to be going to jot down a complete huge factor right here about how the standard technique and the brand new :has() manner of doing it would match into the ITCSS methodology… However now that we’ve got :the place() (the zero-specificity selector) you’ll be able to just about select your most popular stage of specificity for any selector now.

That stated, the truth that we’re not coping with a wrapper — .prose, .rich-text, and so on. — to me makes it really feel like this could dwell within the “components” layer, i.e. earlier than you begin coping with class-level specificity. I’ve used :the place() in my examples to maintain specificity constant. All of the selectors in each of my examples have a specificity rating of 0,0,1 (apart from the bare-bones reset).

Wrapping up

So there you’ve gotten it, a bleeding-edge resolution to a really boring drawback! This newer strategy remains to be not what I’d name “easy” CSS — as I stated in the beginning, it’s a extra complicated subject than it may appear at first. However other than having a couple of barely complicated selectors, I feel the brand new strategy makes extra sense total, and the much less inflexible HTML construction appears very interesting.

If you find yourself utilizing this, or one thing prefer it, I’d like to know the way it works out for you. And should you can consider methods to enhance it, I’d love to listen to these too!