3 replies

@layer ordering convention

front-end

Ive seen the convention like in react or a @layers:

@layer reset,base, components, utils;

@layer reset,base, components, utils;

And ive always been so confused by this ordering. If I have utility classes (eg .row { display: flex;}, .gap-1 { gap:1em;} etc ) I would want the order to be

@layer reset, base, utils, conponents

@layer reset, base, utils, conponents

so that my components are higher than utility classes.

This isnt a good example of a use case but hopefully still gets the ppint across.

<article class="row card"></article>

<article class="row card"></article>

@layer reset, base, utils, components:

@layer utils {
  .row {
    display: flex; 
  }

  .gap-1 { gap:1em;}
}

.@layer components {
  .card {
    @media (width <= 768px) {
      display: block;
    }

    background-color: var(--clr-bg-card);
    padding: var(--default-padding, 1em);
    border-radius: var(--default-radius, 0.5em);
   }
}

@layer reset, base, utils, components:

@layer utils {
  .row {
    display: flex; 
  }

  .gap-1 { gap:1em;}
}

.@layer components {
  .card {
    @media (width <= 768px) {
      display: block;
    }

    background-color: var(--clr-bg-card);
    padding: var(--default-padding, 1em);
    border-radius: var(--default-radius, 0.5em);
   }
}

What am I missing where the convention of utils overriding component styles is the established way?

KP-C

Kevin Powell - Community•2mo ago•

3 replies

curiousmissfox

@layer ordering convention

front-end

Ive seen the convention like in react or a @layers:

@layer reset,base, components, utils;

@layer reset,base, components, utils;

And ive always been so confused by this ordering. If I have utility classes (eg .row { display: flex;}, .gap-1 { gap:1em;} etc ) I would want the order to be

@layer reset, base, utils, conponents

@layer reset, base, utils, conponents

so that my components are higher than utility classes.

This isnt a good example of a use case but hopefully still gets the ppint across.

<article class="row card"></article>

<article class="row card"></article>

@layer reset, base, utils, components:

@layer utils {
  .row {
    display: flex; 
  }

  .gap-1 { gap:1em;}
}

.@layer components {
  .card {
    @media (width <= 768px) {
      display: block;
    }

    background-color: var(--clr-bg-card);
    padding: var(--default-padding, 1em);
    border-radius: var(--default-radius, 0.5em);
   }
}

@layer reset, base, utils, components:

@layer utils {
  .row {
    display: flex; 
  }

  .gap-1 { gap:1em;}
}

.@layer components {
  .card {
    @media (width <= 768px) {
      display: block;
    }

    background-color: var(--clr-bg-card);
    padding: var(--default-padding, 1em);
    border-radius: var(--default-radius, 0.5em);
   }
}

What am I missing where the convention of utils overriding component styles is the established way?

@layer ordering convention

Similar Threads

@layer ordering convention

Similar Threads

Similar Threads

Similar Threads