14 replies

Suitable styling

Hey, i have a question about inline styles. I know for the most part they are bad practice however in a project i'm building the majority of my styles for elements are utility classes with one being a

flow

flow

class which adds spacing between sections.

This is defined as:

.flow > *:not(:last-child) {
  margin-bottom: var(--flow-gap, 1rem);
}

.flow > *:not(:last-child) {
  margin-bottom: var(--flow-gap, 1rem);
}

Considering i have multiple sections using this class, i was wondering if it is suitable to use inline styles to define the spacing of the

--flow-gap

--flow-gap

variable for the sections and only this to allow for easier scanning and editing of the layout rather than having to dig through my css to look for the spacing values. For example:

<section class="section-1 | flow" style="--flow-gap: XYZ;">
  <div></div>
  <div></div>
  <div></div>
</section>

...

<section class="section-1 | flow" style="--flow-gap: XYZ;">
  <div></div>
  <div></div>
  <div></div>
</section>

...

I would much appreciate any insight into this, thanks in advance!

KP-C

Kevin Powell - Community•3y ago•

14 replies

snxxwyy

Suitable styling

flow

flow

class which adds spacing between sections.

This is defined as:

.flow > *:not(:last-child) {
  margin-bottom: var(--flow-gap, 1rem);
}

.flow > *:not(:last-child) {
  margin-bottom: var(--flow-gap, 1rem);
}

Considering i have multiple sections using this class, i was wondering if it is suitable to use inline styles to define the spacing of the

--flow-gap

--flow-gap

variable for the sections and only this to allow for easier scanning and editing of the layout rather than having to dig through my css to look for the spacing values. For example:

<section class="section-1 | flow" style="--flow-gap: XYZ;">
  <div></div>
  <div></div>
  <div></div>
</section>

...

<section class="section-1 | flow" style="--flow-gap: XYZ;">
  <div></div>
  <div></div>
  <div></div>
</section>

...

I would much appreciate any insight into this, thanks in advance!

Suitable styling

Similar Threads

Suitable styling

Similar Threads

Similar Threads

Similar Threads