Tips for organizing critical/non-critical styles for a single CUBE block?

#1

Let’s say I’ve identified a block using the CUBE methodology, and that block has both critical and non-critical styles. And let’s also say I’m building a new site based loosely on eleventy-from-scratch. :slight_smile: Is there a structure you’d recommend for organizing that block’s Sass?

For example, instead of:

scss
  └ blocks
      └ _my-block.scss

…would you do something like?:

scss
  └ blocks
      └ _my-block
          ├ _critical.scss
          └ _non-critical.scss
#2

Oooh this is a good question. I’ve done this sort of thing with Sass in the past which might help you have a flatter structure:

I had a mode mixin that worked a bit like this:

@mixin mode($alias) {
  @if $alias == $currentMode {
    @contents;
  }
}

Then in a Sass file:

.my-block {
  @include mode('critical') {
   display: block;
  }
}

Then finally, a global.scss file and critical.scss file that defines the value of $currentMode.

Bear-in-mind I haven’t tested these above snippets, but hopefully they give you a rough idea :slight_smile:

#3

Oh, wicked, I can’t believe something like that didn’t occur to me. :man_facepalming:t2: Thanks for the recommendation!

1 Like
#4

No worries at all. Glad you’re getting into and getting value from CUBE CSS :slight_smile: