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

Posted by Johan Rönkkö
Johan Rönkkö
28,054 Points

how should i structure my css?

Hi! I have a project in my school where we should have atleast 6 html files and only one css file. I wonder how should i structure it? I want it as DRY as possible. My idea was 1. CSS reset for browsers -> 2. Font imports -> 3. Colors -> 4. Element base styles -> 5. Layout and styles (which is divieded in two: flexbox and other) -> 6. Media queries (also dividied in two)

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It's entirely up to you how you structure your CSS files.

Putting them in groups is a good idea. I tend to write my styles so they match the HTML document tree, so if I have styles for the body element I make sure this is at the top with the following div tag next.

But in terms of keeping your CSS DRY you could think about grouping your CSS selections.

For example 

h1, h2, h3, p {
 color: red;
}

This would ensure heading elements of 1 to 3 and paragraph elements would all share the same styles and is a great way of organising them. :-)

Johan Rönkkö
Johan Rönkkö
28,054 Points

In terms of keeping your code DRY, does it matter if i call my classes multiple times but in different sections as long as i only call a value one time? Example: for better reading i divide my base styles in 3 sections; "flexbox layout", "normal layout" and "styles". The body-tag has display flex (flexbox section), width 90% (normal layout section) and color: grey (styles section). Let's say no other element has these values in my css, would this setup break the DRY-term. Or is it only when u have same values on different elements not grouped together?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

I would use the selector only once if I could help it. But if you knew you were going to use the class multiple times in different sections you could try grouping selectors and adding a comment above them so you know what they're being used for when you go back to your CSS file.

/*comments*/

.text-color, link-color,  .homepage-text-color, contact-text  etc  {
    color: blue;
}

What I like to do is have a group styles that will be used throughout my website, no matter what page I'm on they'll always be used.

Then have styles specific to a particular page

Then any media queries I might be using.

Hope this helps :)