Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is a hard one to answer. Both options have their pros and cons in my opinion.</p> <p>I personally don't love reading through a single HUGE CSS file, and maintaining it is very difficult. On the other hand, splitting it out causes extra http requests which could potentially slow things down.</p> <p>My opinion would be one of two things.</p> <p>1) If you know that your CSS will NEVER change once you've built it, I'd build multiple CSS files in the development stage (for readability), and then manually combine them before going live (to reduce http requests)</p> <p>2) If you know that you're going to change your CSS once in a while, and need to keep it readable, I would build separate files and use code (providing you're using some sort of programming language) to combine them at <strike>runtime</strike> build time (runtime minification/combination is a resource pig).</p> <p>With either option I would highly recommend caching on the client side in order to further reduce http requests.</p> <p><strong>EDIT:</strong><br> <strike>I found this <a href="http://madskristensen.net/post/Combine-multiple-stylesheets-at-runtime.aspx" rel="noreferrer">blog</a> that shows how to combine CSS at runtime using nothing but code. Worth taking a look at (though I haven't tested it myself yet).</strike></p> <p><strong>EDIT 2:</strong><br> I've settled on using separate files in my design time, and a build process to minify and combine. This way I can have separate (manageable) css while I develop and a proper monolithic minified file at runtime. And I still have my static files and less system overhead because I'm not doing compression/minification at runtime.</p> <p><em>note: for you shoppers out there, I highly suggest using <a href="https://github.com/ServiceStack/Bundler" rel="noreferrer">bundler</a> as part of your build process. Whether you're building from within your IDE, or from a build script, bundler can be executed on Windows via the included <code>exe</code> or can be run on any machine that is already running node.js.</em></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload