How CSS class attributes have to be ordered

Thursday, September 4, 2014

How to order a CSS class attributes.

The poll result of http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/ shows many uses or suggest to order them by Randomly or Grouped by type.
But here is my point, when you have number of attributed stacking up, there are changes for attributes to get duplicate. see the following example

.selector {
    position: absolute;
    z-index: 10;
    top: 0;
    font-family: sans-serif;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #333;
    margin: 10px;
    background: #000;
    color: #fff;
    font-size: 16px;
    text-align: right;
    display: inline-block;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}

Padding is duplicated on the above sample, which is bit difficult to find it out. So Randomly is a bad habit.

My selection will be Alphabetic, where you got to know A-Z to sort them up and will easily out the above issue.

.selector {
    background: #000;
    border: 10px solid #333;
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-family: sans-serif;
    font-size: 16px;
    height: 100px;
    left: 0;
    margin: 10px;
    overflow: hidden;
    padding: 10px;
    padding: 10px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    width: 100px;
    z-index: 10;
}

Yes, as sampled here https://github.com/necolas/idiomatic-css#format, grouping by type is cool. But I still recommend to sort by name with in the group.
So my finals will be


.selector {
    /* Positioning */
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
   
    /* Display & Box Model */
    border: 10px solid #333;
    box-sizing: border-box;
    display: inline-block;
    height: 100px;
    margin: 10px;
    overflow: hidden;
    padding: 10px;
    width: 100px;
   
    /* Other */
    background: #000;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    text-align: right;
}


I have no plan to discuss about Line length here as its the baddest way, I think.

0 comments:

Post a Comment