6

lesser of two evils: @import vs large stylesheet

almost 5 years ago from , Graphic Designer at UF

Here's my situation...

I work at a college in a large university, creating course pages/templates for our online courses in Canvas (http://www.instructure.com/). Canvas allows a designer to link one (and only one) stylesheet to a department and this is the stylesheet I work in to apply the templates and images for each course. Unfortunately this has created a very large stylesheet (~1.3mb) as there are over 30 courses.

Here's my question...

Is it better for page loading times to have a very large stylesheet or to have numerous @imports for the various courses?

9 comments

  • Marc EdwardsMarc Edwards, almost 5 years ago (edited almost 5 years ago )

    Have you looked into using SASS (SCSS) or LESS or some other CSS preprocessor?

    http://sass-lang.com

    Using SCSS, you can probably have the best of both worlds — a modular source, with lots of reusable components, and tiny CSS files (with all whitespace stripped) for each page.

    You could have something vaguely like this:

    • /scss/reset.scss
    • /scss/bass-styles.scss
    • /scss/course-01.scss
    • /scss/course-02.scss
    • /scss/course-03.scss

    That could combined reset and base-styles, then add the course specific other bits, generating:

    • course-01.css
    • course-02.css
    • course-03.css

    Plus, those generated CSS files could have all comments removed, all whitespace removed and be far smaller and faster to load.

    I use CodeKit to compile my SCSS, but there’s lots of different ways it can be done.

    6 points
  • Daniel EdenDaniel Eden, almost 5 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, almost 5 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
  • Catalin CimpanuCatalin Cimpanu, over 4 years ago (edited over 4 years ago )

    There was a study on Smashing Magazine that detailed this exact topic a few years back. The proven conclusion showed how multiple HTTP requests slowed down the page much more than one big file, even if the combined size of all the multiple files was smaller than that one big file.

    Sorry if I ain't putting the link here but it's 2 o'clock here and I wanna go to sleep :P

    2 points
  • James Van Dyke, over 4 years ago

    For page performance, loading them all at once is better. @import statements halt the processing of the page and future downloads until complete and processed. In other words, you're adding overhead without any benefit. More info: https://developers.google.com/speed/pagespeed/service/FlattenCssImports

    If you're in the mood for a suggestion... There are lots of solutions out there, but you might want to look at LoadCSS

    https://github.com/filamentgroup/loadCSS

    If you separate the files for each course, you can use loadCSS to load the extra needed stylesheet when the user navigates to that page.

    2 points
  • Alfonse SurigaoAlfonse Surigao, over 4 years ago

    Here's a good look at comparing @import for stylesheets. While this doesn't necessarily talk about @import vs file size, it gives you a better idea of why not to use @imports.

    http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

    0 points
  • Grant Palin, over 4 years ago

    If the one stylesheet is not minified and gzipped, that's a good first step to take. Since CSS is just text, it compresses well. Separate files, even if small, require additional requests which just moves the bottleneck.

    From a management perspective, a preprocessor like Sass can be used to manage component styles in separate files, then combine them together into one file for the browser to use. Alternately, plain CSS files can be concatenated (joined together) before upload to the server, or by the server, so the browser only gets the one file.

    0 points
  • Daniel Ypsilanti, almost 5 years ago

    Marc - I was thinking of doing some kind of file structure similar to that. Currently I use SCSS when writing the styles locally, compile/minfy it and then copy and paste it into the stylesheet. Not sure if the server is setup to generate CSS from SCSS, or even if it would be set-up to if I requested it. Since this LMS is fairly new I think that the administration is hesitant to make any kind of change, I’m lucky that I have access to the single CSS file :/

    Daniel - The style sheet is so large because in order to have styles for a particular course there needs to be a specific class (.context-course_”uniqueCourseID”) pointing each style to each course. This also makes sure that each template (one for undergrad and one for grad) goes to the appropriate course. Times that by 30+ and it gets to be unwieldy. My job has been a bit of a trial by fire so now that things are calmed down I’m working to optimize this CSS, both for me to update and maintain and for load times for students.

    James - loadCSS is exactly what I need! Eventually they’ll give me access to the javascript file too :/

    Thanks for your advice everybody!

    0 points