0

While creating a responsive theme (eg. a bootstrap based sub-theme) is there an official/recommended way to organize CSS files for different media queries? In general I put everything into one CSS file.

1. All In One

mytheme.info:

...
stylesheets[all][] = css/style.css
...


style.css:

body { ... }

p { ... }

...

@media (max-width: 767px) {
...
}

@media (min-width: 1024px) {
...
}


2. Separated CSS Files

mytheme.info:

stylesheets[all][] = css/style.css
stylesheets[all][] = css/480.css
stylesheets[all][] = css/720.css
stylesheets[all][] = css/960.css


style.css, 480.css, 720.css ...


3. Separate CSS Files for Each Media Query Defined in .info File

mytheme.info:

stylesheets[all][] = css/style.css
stylesheets[all and (min-width: 480px)][] = css/480.css
stylesheets[all and (min-width: 720px)][] = css/720.css
stylesheets[all and (min-width: 960px)][] = css/960.css


style.css, 480.css, 720.css ...


4. Other?

I wonder what is the recommended way for this or it doesn't matter (structural, performance wise etc).

Improve this question
3
  • I don't think there's any difference. And if there is, it will be so small it won't make any difference.
    – Beebee
    Aug 21, 2015 at 9:39
  • Using LESS I prefer store custom less code in separate file and other possible changes make in variables.less
    – notabotsure
    Aug 21, 2015 at 9:47
  • 1
    Since you mention you are using Bootstrap, you could use LESS or Sass to separate your code in different files, and then on compilation they will become a single file (even compressed if you want to), thus reducing the problem of multiple http requests.
    – typologist
    Aug 21, 2015 at 18:04

1 Answer 1

Reset to default
2

This is possibly hard to answer. But all the way are acceptable.

Mostly people don't like 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 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.

I also found another question related to this https://stackoverflow.com/questions/16657159/when-using-media-queries-does-a-phone-load-non-relevent-queries-and-images . This will further clear your concept about this.

Improve this answer
6
  • If you turn on CSS aggregation, point 1's performance gains for multi-https requests becomes obsolete. On point 2 I guess you're suggesting SASS/LESS? Runtime minification can be resource hog only if you're not caching it effectively.
    – Beebee
    Aug 21, 2015 at 9:38
  • it's described in the link i provided.
    – WaQaR Ali
    Aug 21, 2015 at 9:40
  • 1
    Which is not relelvant to drupal at all. I'm speaking in relation to Drupal. Point 1 is not relevant at all, because when you turn on CSS aggregation, drupal will group your CSS files and reduce the HTTP requests.
    – Beebee
    Aug 21, 2015 at 9:46
  • 1
    Waqar Ali, I believe it is a recommended practice in Stackexchange to provide some details about what the links you put in your answers talk about. This is useful in case these links would disappear, and it makes your answer more useful and clear at first reading... Thank you.
    – Kojo
    Aug 21, 2015 at 11:43
  • 1
    ok, thanks for good suggestion. I will keep it in my mind next time
    – WaQaR Ali
    Aug 21, 2015 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.