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
Simon Dein
4,772 PointsOrganizing and formatting stylesheets optimally.
Hi!
I currently work as a high end retoucher, and have recently went 'half time' to pursue a career in web development/design. One of the things i have got renowned for in my current career, besides my skillset itself (not trying to be posh here), is my very strict organization of my files. When somebody else opens my files, they allways know where to find layers and adjustments i.e., i try to build my files as simple, logically and consistent as possible.
This is something i deeply want to implement in my (hopefully) future work as a developer, but i struggle with. To me it seems, just like in photoshop i guess, that developers have very different approaches to the way they organize their stylesheets.
I would love to have or to make, a general template for structuring my stylesheets, and furthermore, structuring them as logically and simply as possible. I.e. where to put what content, what should be grouped together and in what order.
Do anyone, or you at Treehouse, have any guides, templates or suggestions for an article going over this?
Any concrete answers and examples will be much appreciated! :)
Thanks, Simon
1 Answer
jacobproffer
24,604 PointsHey Simon,
I'd suggest looking into Sass in conjunction with Gulp. With Sass, you'll already be organizing your styles into categories. For example, all of the styles for your header would go into _header.scss. Compiled, you'll only have one plain CSS stylesheet. Sass is a great way to organize your styles so that when you need to find a style, you'll have a better idea of where that style lives. It's a great time saver as well.
Introduce Gulp and magic starts to happen. Let's say you have your primary css stylesheet but then also a few stylesheets for a carousel or something of the sort. Well with Gulp, you can add a task that will concatenate all files in a specific directory into one file. So in the end, you only need to include one CSS file in your header. This will also include any other stylesheets that you add in the future if you glob.
In the end, try to aim for as few stylesheets as you can. Consider load times.
Simon Dein
4,772 PointsSimon Dein
4,772 PointsThanks alot for the response and tips! I'll have a look into Sass and Gulp :)