Linking CSS Files in HTML

Question

Is it a good practice to use two to three stylesheets for a web design. 1. framework that we are using, 2. Main stylesheet 3. Responsive stylesheet which would have media queries. How does it matter if we put media queries into the main stylesheet? Is there a difference in performance? What are the pros and cons of embedding 2 stylesheets instead of one?

Answer 1

Loading multiple stylesheets:

• Requires more HTML
• Requires more HTTP requests

Unless you are frequently changing one of them, you will always get better performance by having them in a single file (this may change with HTTP2).

The only benefits to having them in separate files is for ease of development, but you should combine them at build time.

Answer 2

I'll recommend using CSS preprocessors, such as LESS/SASS.

Those allow additional leverage over CSS by providing additional syntax that delivers lots of advantages:

• List item
• Nested syntax
• Ability to define variables
• Ability to define mixins
• Mathematical functions
• Operational functions (such as “lighten” and “darken”)
• Joining of multiple files and compressing final result

You can read more about this here: Advantages of preprocessors