lesser of two evils: @import vs large stylesheet

over 6 years ago from Daniel Ypsilanti, Graphic Designer at UF

  • Daniel EdenDaniel Eden, over 6 years ago

    +1 for Marc’s comment—Sass can be a big help here.

    If you’re looking to stick with plain CSS, a large stylesheet is probably always preferable.

    Lots of @import rules can add up to many HTTP requests, which are a real performance hog. By using one large stylesheet, you're having the user download (and presumably cache) everything they need for the entire site, versus them having to download multiple stylesheets for each page they visit.

    That said, 1.3mb seems insanely big for any site. Even Facebook’s global CSS file only weighs in at ~200kb. Before you think about imports vs. one big sheet, you should think about what you're doing to produce such a large file in the first place. Try refactoring your CSS to reduce the number of repeated rules, etc.

    Harry Roberts’ CSS Guidelines are a good place to start to learn about best practices for scalable, performant CSS: http://cssguidelin.es

    3 points
    • Jarrod DrysdaleJarrod Drysdale, over 6 years ago

      This! A stylesheet at 1.3mb is a problem. Agree that examining why the file is getting so large should be the first step.

      Since we're talking about Instructional Design here in an LMS, I'm guessing the CSS is generated from something like Articulate.

      0 points