0

FOUC is a common user experience problem for sites with a lot of CSS (especially after you start combining your CSS files), and the common solution is to separate important layout rules in a small standalone file which is loaded first. That leads to code which is hard to read and maintain because related rules are at very distant places. I am wondering if there is any CSS preprocessor which supports separating code into different files? That is, you would write something like

.main-content { #FOUC
    position: absolute;
    top: 10px;
    left: 15px;
}
.main-content h1 {
    font-weight: bold;
}

and .main-content and .main-content h1 end up in different files. (Or maybe the same on a per-rule level.)

Charles
  • 50,943
  • 13
  • 104
  • 142
Tgr
  • 27,442
  • 12
  • 81
  • 118
  • The article seems to be somewhat incorrect. Please read http://www.bluerobot.com/web/css/fouc.asp/ for some very easy fixes. – Gerben May 16 '12 at 16:39
  • The bluerobot article defines FOUC very narrowly; it can be caused by a lot of other things than `@import`ing. (For example, Safari has a [different FOUC bug](http://www.webkit.org/blog/66/the-fouc-problem/).) Large, slowly loading CSS files can also cause FOUC (maybe not as bad but still visible), and there is no easy fix for that except separating the CSS. – Tgr May 17 '12 at 08:14

0 Answers0