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 How to Make a Website Customizing Colors and Fonts Organize CSS with Comments

Posted by Adiv Abramson
Adiv Abramson
6,919 Points

Is there a best practice with regard to arrangement of rules in a CSS file?

During the video, the instructor reorganized the rules of the CSS file. I was thinking there may be several ways to organize a CSS file, including:

1.) Write CSS rules in the same sequence as the HTML elements are loaded 2.) Divide CSS rules according to function, e.g color rules, font rules, position rules etc 3.) Write CSS rules from the most general selector to the most specific selector, e.g. body, nav, div, p a etc followed by .class and # selectors

Can you advise which of the above, if any, is recommended? Perhaps a combination of the various approaches is useful? Or perhaps a one size fits all approach simply doesn't exist? Thank you

Cristian Ambæk
Cristian Ambæk
Courses Plus Student 415 Points

As you work with CSS you create a style of your own.

I would recommend you do the following.

  1. Write the CSS as you write your HTML (order wise) makes it easy to scan a long of CSS. As you can tell what CSS style what part of the HTML page and theirby know where you are and where you need to go.

  2. To the above, make code chunks with eye "candy". /#####/ /Header/ /#####/

EASY to spot that this is the header section of the file.

Just keep the following in mind. The further down a rule is written the more IMPORTANT it gets. Because rules that comes after others have the option to overwrite previously ones.

Kind regards.

2 Answers

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

There isn't really a one size fits all answer for every project or framework. However, it's a combination of all of your suggestions plus a bit of common sense and adherence to DRY (Don't Repeat Yourself) that yields the best results.

Keeping things in logical order and including lots of comments to make sure it is clear to you and other developers later is the central tenet.

All that said, preprocessors such as SASS help make CSS much more orderly and way easier to maintain. If you're getting into a large project, starting with SASS is the first step in maintainable stylesheets.

Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points
Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points

Hi Adiv,

I have the same question as yours when I was still starting out. I have read on some blogs and just like what Austin say, it boils down to your preference. But if you're interested here's two common practices of designers and developers I found:

  1. Arrange the CSS declarations in alphabetical order. In the forum where I read this, one developer said that it benefits him the most especially if you are to scan a thousand lines of code.

  2. (What I use) Nicholas Gallagher's Idiomatic CSS. This approach basically arranges the code by their role. This is basically his recommendation and I quote from his github page:

.selector {
    /* Positioning */
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Display & Box Model */
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #333;
    margin: 10px;

    /* Other */
    background: #000;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    text-align: right;
}

As you can see, the CSS declarations are arranged according to their role and how they style or modify HTML elements. If you are interested to read the whole thing (really good read though) (here's the link)[https://github.com/necolas/idiomatic-css].

Hope this helps!