14 replies

hgroup tag & utility class use case

Hey, I have two questions. With the

hgroup

hgroup

tag, am i able to group a

header

header

tag and a

paragraph

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>

<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

flex

and

grid

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>

<div class="flex">
  <button>Flex item 1</button>
  <button>Flex item 2</button>
</div>

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

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

I'd appreciate any insight, many thanks!

KP-C

Kevin Powell - Community•3y ago•

14 replies

snxxwyy

hgroup tag & utility class use case

Hey, I have two questions. With the

hgroup

hgroup

tag, am i able to group a

header

header

tag and a

paragraph

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>

<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

flex

and

grid

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>

<div class="flex">
  <button>Flex item 1</button>
  <button>Flex item 2</button>
</div>

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

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

I'd appreciate any insight, many thanks!

hgroup tag & utility class use case

Similar Threads

hgroup tag & utility class use case

Similar Threads

Similar Threads

Similar Threads