CODEWITHSUNDEEP
css
Eric Di Bari
Eric Di Bari

Reputation: 3867

Standard for CSS styles order?

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?

Upvotes: 2

Views: 327

Answers (4)

Titus
Titus

Reputation: 4627

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!

Upvotes: 3

Steve Adams
Steve Adams

Reputation: 2837

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.

Upvotes: 0

Marko
Marko

Reputation: 72222

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;
}

Upvotes: 0

r0ast3d
r0ast3d

Reputation: 2635

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.

Upvotes: 0

Related Questions