CODEWITHSUNDEEP
htmlcss
Christoph Burschka
Christoph Burschka

Reputation: 4689

Combining alternate stylesheets into one file

I'd like to optimize a page by combining all CSS files into a single resource before serving it. However, I'm also using multiple alternate stylesheets, which apparently have to be included as individual links.

Other than weird tricks like packing the alternate stylesheets into data: URIs to inline them (clever, but... ugh), are there any ways to merge them into one file? I was thinking there might be some kind of @-rule in CSS for this (like the link's media attribute can be replaced with @media in CSS) but I haven't found it.

Upvotes: 1

Views: 210

Answers (2)

Sethen
Sethen

Reputation: 11348

You could do it by hand but this get really tedious and having to do it every time is a pain. It sounds like what you need is some sort of process to do this task for you every time you make a change to your style sheets.

What you should do is incorporate a build tool into your directory like Grunt. I wrote a beginners guide to getting started with Grunt: http://strongloop.com/strongblog/use-grunt-js-and-the-power-of-javascript-to-automating-repetitive-tasks/

Here's a repo that does the exact thing your talking about: https://github.com/gruntjs/grunt-contrib-cssmin .. All you have to do is grab it from the repo or use Node Package Manager to install it locally to your project.

It's pretty straight forward and gives you a ton of options to optimize your builds. Not just for CSS but HTML and JavaScript. The sky is truly the limit with build options. It seems like this is the way that most front end development processes are going.

Grunt isn't the only kid on the block, there is Yeoman and a few others around that will do the same thing.

We've pushed Grunt to the limit and had it do a ton of builds with a bunch of different options and we have yet to be disappointed. It really streamlines our processes on the front end and allows us to optimize our code to be production ready in another directory.

Upvotes: 1

Akaryatrh
Akaryatrh

Reputation: 531

I'd go for Yeoman (http://yeoman.io/) that use Grunt, Brunch (http://brunch.io/), or Gulp (http://gulpjs.com/).

From my side, i'm more accustomed with Brunch (cause i find it really easy to set up) where you can set this kind of config :

exports.config =
  files:
    stylesheets:
      joinTo:
        'stylesheets/app.css': /^.*/
      order:
        after: ['vendor/styles/helpers.css']

(you can do the same for js files actually)

Upvotes: 1

Related Questions