Search code examples
cssattributesstylesheet

How important is the order of Attributes within a class


I would like to know if the order within a class is important and if this might effect the speed of the website. I know that the order of classes within the stylesheet is important but what's about the attributes within the classes, are they important too?

Has a correctly or incorrectly order of attributes within a class any effect? If so, what is that effect and what is the common rule for such order?

Of course there are much more attributes but I guess this should give an idea about the order I generally use. Is there anything I should/can improve about it:

  1. Positioning
  2. Styling
  3. Font
  4. Radius

CSS

.example_class {

float: l/r;
position: rel/absl;
margin: 0 0 0 0;
padding:0 0 0 0;
width: xy px;
height: xy px;
background: image/color;
font-family: font-name;
font-size: xy px;
color: #xyz / #abcdef / red; 
radius: 0 0 0 0;
}

Solution

  • The order of properties within a selector doesn't matter at all, aside from the fact that you can override selectors some browsers can't read:

    background: #FFF; /* will be used by browsers that can't understand: */
    background: linear-gradient(...);
    

    Other than that it's a matter of taste -- you could sort them alphabetically or by "group" as you've done, or whatever you like.