Standard for CSS styles order?

Question

Is there a standard or best practice for the order of grouping of styles CSS element styles? I know that this isn't a major concern, but I want to be sure I'm always producing readable code, especially for elements with many styles.

Take for example:

#element {
    font-family: Arial;
    font-size: 8pt;
    color: #666666;
    border: 1px solid #ccc;
    position: relative;
    top: 5px;
    left: 5px;
}

#element groups the styles in the order of text styles, then border, then position. Is there a standard for a css-type hierarchy that places some type of priority or importance on this order? For example, should you group in order of: position, text styles, border?

Regarding "priority or importance": How could different order in the same block possibly affect anything? As in, how can color have more priority than border? It only matters if you have the same property listed twice. Personal preference. — No Results Found
– No Results Found, Commented Nov 4, 2011 at 22:52

Titus · Accepted Answer · 2011-11-04 22:58:27Z

Quite frankly, it boils down to personal preference, but here's my convention:

Group things that look like they're related to each other. Then, use white space to separate each "group". I just hit "enter" after each block. For other styles, like "top", "left", etc., I put them all in one line, after their main style (like "position"). I also tend to put CSS3 properties as the last style in any given block.

Sometimes, when I'm in a good mood, I also tend to loosely alphabetize the properties (by block). But again, it's really just preference.

Example of what I do:

#element {
    color:black;        
    font-family:Arial;
    font-size:1.2em;
    font-weight:bold;
    text-transform:capitalize;
    text-shadow:0 1px 1px black;

    background-color:white;
    border-bottom:1px dotted gray;
    box-shadow:1px 1px 2px black;

    position:fixed;
    top:0; right:0;

    height:30px;
    width:245px;
}

Just my two pennies!

r0ast3d · Accepted Answer · 2011-11-04 22:42:25Z

0

Different people have different opinion, I would prefer it to be alphabetically sorted.

Then CSS itself can be re-factored to separate out structural CSS pages and ui element specific pages.

The structural CSS are the ones that control the structure of the pages.

answered Nov 4, 2011 at 22:42

r0ast3d

2,6351 gold badge14 silver badges18 bronze badges

Comments

Marko · Accepted Answer · 2011-11-04 22:45:32Z

0

Good question, not sure there is a standard but my preferred method is.

#element {
    layout,
    positioning,
    text style
    appearance
}

For example

#element {
    display: block;
    width: 15px;
    height: 15px;
    float: left;
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
    color: #333;
    text-indent: -9999px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}

answered Nov 4, 2011 at 22:45

Marko

72.3k29 gold badges126 silver badges160 bronze badges

Comments

Steve Adams · Accepted Answer · 2011-11-04 22:52:38Z

0

Like with all styles of coding, it's not that important. What does matter is consistency. If you work on a team, you should all agree on what suits you all best rather than find a convention that is thought to be best that you'd need to adapt to... That's really a waste of time. Likewise, if you are working on projects that will be inherited, stick with the same convention, but do what suits you best.

answered Nov 4, 2011 at 22:52

Steve Adams

2,79224 silver badges29 bronze badges

Collectives™ on Stack Overflow

Standard for CSS styles order?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related