Better Handling for Nested Rhythm Objects

[spaceninja]

Currently, if you have nested Rhythm objects, it can have unexpected behaviors. Example:

<div class="o-rhythm o-rhythm--generous">
  <h1>blog title</h1>
  <div class="o-rhythm o-rhythm--default o-rhythm--generous-headings">
     <p>blog content</p>
     <p>blog content</p>
  </div>
</div>

I think a reasonable reading of the intent here is that there should be generous spacing between the blog title and the div wrapping the content, and then default spacing between the content paragraphs.

What actually happens is default spacing between the blog title and the div wrapping the content.

That's because the spacing on the div is set to --rhythm and that custom property is reset by o-rhythm--default to default spacing. The intent is that custom property resets spacing inside the element. The effect is that the custom property resets spacing on the element itself as well.

In the WordPress theme, you can see an example of us working around this shortcoming in talk.twig, where several nested Rhythm objects are wrapped in a div just to keep them from affecting the overall page spacing.