Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Getting Started with CSS Importing Style Sheets with @import

Posted by Eline van Silfhout
Eline van Silfhout
6,045 Points

Why would someone use more than one CSS-file?

I'm wondering why someone would use more than one CSS-file.

1 Answer

Kevin Gates
Kevin Gates
15,052 Points
Kevin Gates
Kevin Gates
15,052 Points

Depending on the size of you website (or web app), you could separate the files in relation to what they are styling. For instance, you may have a main website theme styles in "styles.css".

However, you may have a demo page where you show case an example of some websites you design. On this page, you may use another styles.css.

Alternatively, you may have a webapp functionality on some page of your domain. Again, you may use different styles for this.

A lot of JavaScript frameworks use what is called components. These often have a base css file, then each component (such as a navigation bar component) has its own CSS for how to style that particular component. This is nice because if you need to change something on the navigation bar, you don't have to look through hundreds of lines of CSS, but maybe less than 20.

For fuller context, most frameworks have something call a preprocessor and compiler which ultimately will merge all of these CSS files into one large CSS file in production because that is faster for the web.