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
huckleberry
14,636 PointsGeneral File/Folder Structure For A Website: Video?
I've just started my very first website and as I'm about shin deep now I'm realizing there are some things I hadn't thought about in regards to maintenance and simplicity. Mainly, file/folder structuring.
One question is, do I make ONE main CSS file for all the main styling that will be shared on every page and then have separate CSS files within each directory if there's anything specific to that page that needs to be styled?"
I started looking around for best practices and articles and the Q&A's I've come across have me more confused than I was(thanks stack overflow). People talking about design time vs run time and using a build process to compile and using include files and... ugh...
I like how Treehouse™ does things. Very clear and explaining everything in detail... pros & cons and such.
I might add I'm only into the CSS dives on the web design track so maybe they do cover this very thing and I just haven't gotten to it yet. (I've also just recently come back after months away so maybe I saw this and forgot the lesson but I can't seem to locate it.)
Is that the case??
If not, will you awesome staffers do one please? lol.
If anyone else could help me out or post a link that would answer my questions/concerns that'd be awesome.
2 Answers
Mike Burnett
8,429 PointsI'd say one css directory for sure, and like Dan said, one of the nice things about css is that you can use one style sheet across many pages of a site. There may be times when you want multiple style sheets, like if you're using a reset style sheet to eliminate cross-browser variations, but it's best for your sanity to keep them all in one directory I think.
Other common directories include img, vid, and audio for media files. Then you might have js for JavaScript, swf for Flash, etc.
If your host offers any one-click installs, you can install one and look at how those sites lay out their data. There's some variation, though. WordPress keeps its main css file in the root of each theme's folder. I use a static blog framework called Hexo, and has its index.html off the main directory in a directory called public and the css folder sits in there too.
If you do a web search for "website file structire" you'll find quite a few articles, videos, and diagrams.
huckleberry
14,636 Pointsthank you both! And yeah I have since come across this within the course. :)
Dan Garrison
22,457 PointsDan Garrison
22,457 PointsI've gone through most of the CSS courses and you will get into the specifics a bit more as you proceed through the courses.
However, the short answer is that for most websites you should really stick to one css file. Multiple CSS requests can significantly impact performance and can complicate design. Performance is especially impacted if you use the @import rule to add the CSS file.
Usually the best way to add a style sheet is by using the link tag in the html. This has the advantage of speed because the css file is downloaded when the user first visits the website and only the HTML will load when the user visits other pages on the site. So it only needs to download the CSS once. If you create multiple style sheets for different pages it will defeat the purpose and you could wind up with redundant code. You may also wind up with weird inheritance issues if you link multiple stylesheets.
Instead of creating multiple stylesheets, it's best to logically organize everything in the single stylesheet using comments to help group similar design choices together. That being said there are some reasons you may use multiple style sheets or even use the @import rule to add css, but it's rare and should probably be avoided if at all possible.