hgroup tag & utility class use case

Hey, I have two questions. With the hgroup tag, am i able to group a header tag and a paragraph tag acting as a description together or would that be bad practice? Is it also recommended to use this tag? For example-
<hgroup>
  <h1>A website header</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa ducimus aliquid provident quo nam.</p>
</hgroup>

Moving on to utility class use cases, i've learnt that the direct styling of an element should be within it's styles and not a utility class. So for something like flex and grid, would it be appropriate to have a utility class for them? I've seen kevin do this so i just wanted to check. For example-
<div class="flex">
  <button>Flex item 1</button>
  <button>Flex item 2</button>
</div>

.flex {
  display: flex;
  gap: var(--flex-gap, 1em);
}

I'd appreciate any insight, many thanks!
Was this page helpful?