how external CSS stylesheets should be order properly?

Question

The stylesheets i have put in a project, in ascending order, are as follows:

1. Eric Meyer's 'reset.css'
2. 'bootstrap.css'
3. 'bootstrap-theme.css'
4. 'jQueryMobile.css'
5. My custom 'style.css'
6. 'media.css' (media queries for responsive layouts).

Is there any rule or a more proper way to order them so that no conflicts arise later? Please help!

Answer 1

Since the point of 'cascading' style sheets applying things sequentially has been brought up already, I won't expand much on that. Just remember that styles can be overwritten by the same property if it is found either in another style sheet below it (that is, the second style sheet could have something overwriting something in the first, but not the other way around). However, this also applies to properties within the same style sheet as well. if p{font-size:1em;} is on line one, and p{font-size:2em;} is on line two, then font-size will be 2em.

Once you have chosen an order, I'd also suggest looking into putting your CSS into as few files as possible. Each external style sheet (or anything external on your page) is another server request, which contributes to slower page loads. If all your styles are used on every page, combine them into one large CSS file, still following the order of your style sheets.

Answer 2

Since CSS definitions are overridden when new definitions are made, I'd suggest to put all css files that are from external sources (like jQuery, bootstrap, etc) first (at the top).

This way you can easily override the css tags in your custom CSS files.

Otherwise, you will have the external files overriding everything that you are making in your custom CSS files, which is definitely no bueno!

Hope this helps!

Answer 3

It depends on what order you want your css to execute in.

The one you would put first, will get loaded and executed first.... So when you put reset first, all the tags would be resettled to their default behavior

If you want to have your custom style loaded foremost, then place it above all the other css ( even above the reset )...but keep in mind, the last style find for any common tag, would be implement if no no class for that tag has been called in you markup explicitly by you!!

For eg.

if you have :

<ul>
  <li> blah 1</li>
  <li> blah 2</li>
  <li> blah 3</li>
  <li> blah 4</li>
  <li> blah 5</li>
</ul>

then assuming in your custom css, you have set

ul{padding:10px}

and you call it after, reset, then this padding would be applied but if you have called your css before reset.css, then <ul> would be reset to default!! :)

This would have been order for me :

• Eric Meyer's 'reset.css' ( reset everything first )
• My custom 'style.css' ( detect browser dimesnion and call the related css )
• media.css ( (media queries for responsive layouts). )
• bootstrap.css ( execute all other css )
• jQueryMobile.css ( * suport bootstrap.css once it loaded* )
• bootstrap-theme.css ( themese can come in last always )