Menu icon Foundation
Foundation CSS loads *: before *:after pseudo-elements too many times

My issue is related to slow loading of CSS on my page due to too many *: before *:after being loaded... Example:

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Now I can't figure this out. I compiled foundations app.scss and just using this app.css file and for some reason also classes like .columns or small-12, medium-12 and large-12 are being loaded several times on my page, overwriting each other. This is causing my css being loaded couple of seconds.

I'm using foundation-version { font-family: "/5.5.0/"; }

I was not able to find that someone else had this problem. Anybody can point me to a solution for this? Thx

pseudo-elementscssscssloadingslow css

My issue is related to slow loading of CSS on my page due to too many *: before *:after being loaded... Example:

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Now I can't figure this out. I compiled foundations app.scss and just using this app.css file and for some reason also classes like .columns or small-12, medium-12 and large-12 are being loaded several times on my page, overwriting each other. This is causing my css being loaded couple of seconds.

I'm using foundation-version { font-family: "/5.5.0/"; }

I was not able to find that someone else had this problem. Anybody can point me to a solution for this? Thx

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Do you mean the * selector? We're not using this very much in foundation.

What version of Sass are you on? sass -v

goran over 4 years ago

I am using Sass 3.4.3

For instance on some elements on my page I have repeated css like this below:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

and it repeats a lot and its slowing my load. Now Im not sure what is causing this...

Rafi Benkual over 4 years ago

Right, this should only happen once at the top. Are you getting any deprecation warnings? What Foundation version?

You functions file around line 13 should look like:

@mixin exports($name) {
  // Import from global scope
  $modules: $modules !global;
  // Check if a module is already on the list
  $module_index: index($modules, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $modules: append($modules, $name) !global;
    @content;
  }

goran over 4 years ago

I was missing "!global" in this part of the code. So I think this was making my app.css a lot bigger and it was loading more stuff.

Thx Rafi this helped.