Single huge .css file vs. multiple smaller specific .css files? [closed]

by

This is a hard one to answer. Both options have their pros and cons in my opinion.

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.

My opinion would be one of two things.

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)

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 runtime build time (runtime minification/combination is a resource pig).

With either option I would highly recommend caching on the client side in order to further reduce http requests.

EDIT:
I found this blog 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).

EDIT 2:
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.

note: for you shoppers out there, I highly suggest using bundler 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 exe or can be run on any machine that is already running node.js.

More Related Contents:

  1. HTML not loading CSS file
  2. How would I achieve a shadow that won’t show through transparent text?
  3. Fill in text in HTML5
  4. How to place two divs next to each other?
  5. Why does height 100% work when DOCTYPE is removed?
  6. Browsers’ default CSS stylesheets
  7. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  8. Changing three.js background to transparent or other color
  9. Failed to decode downloaded font
  10. How can I ensure that text is inside rounded div?
  11. Which HTML5 reset CSS do you use and why? [closed]
  12. Div height 100% and expands to fit content [duplicate]
  13. Add a text suffix to
  14. html5 vertical spacing issue with
  15. How to position a div in the middle of the screen when the page is bigger than the screen
  16. Nested rows with bootstrap grid system?
  17. How to write a caption under an image?
  18. How to make the overflow CSS property work with hidden as value
  19. How do I line up 3 divs on the same row?
  20. Styling Password Fields in CSS
  21. CSS: How to align vertically a “label” and “input” inside a “div”?
  22. Preventing an image from being draggable or selectable without using JS
  23. Div side by side without float
  24. Will targeting IE8 with conditional comments work?
  25. Full background image with fade effect
  26. There is a 4px gap below canvas/video/audio elements in HTML5
  27. How can I align 3 divs side by side?
  28. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  29. 100% DIV width is not really 100%
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment