Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
14,887 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.