If you're building with EQCSS there may be a period of time between when the CSS on the page applies and when your EQCSS-powered styles kick in. This can look pretty gross, depending on the CSS present on the page.

When I'm building widgets and modules with EQCSS on JavaScript-heavy sites there's one quick technique I use to avoid the dreaded Flash of Unstyled Content, the lightswitch technique!

The Light Switch Technique

Any time you have both CSS and JavaScript-powered CSS styles applying to an element, one easy way to avoid the FOUC is to make the element invisible using regular CSS, and then after applying all of your JavaScript-powered styles to the element, you also use JavaScript to make your element visible again.

It's very simple in practice, imagine a scenario like this:

  <nav>
  <a href=#>Link></a>
  <a href=#>Link></a>
  <a href=#>Link></a>
</nav>

In your styles, you could write something like the following to make sure that your element isn't visible until after JavaScript has had a chance to catch up with the styling:

  nav {
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

/* All your styles for NAV here */

@element 'nav' {
  $this {
    opacity: 1;
  }
}

And like that, our nav element will gently fade in once JavaScript has had a chance to compute the styles.

There are other ways to handle a flash of unstyled content, and it's always best if you can write your styles or build your site in a way where the flash doesn't occur… but in a pinch this technique provides a way to work around it.