Incorrect property order -- vendor specific order #21

Open
thezoggy opened this Issue May 4, 2012 · 3 comments

Projects

None yet

2 participants

@thezoggy
thezoggy commented May 4, 2012
Incorrect property order for rule ".subnav .nav > li > a"

  Correct order below:

     684.  padding: 5px 10px;
     685.  margin: 0;
     686.  font-weight: normal;
     687.  text-shadow: none;
     688.  border: 0 none;
     689.  -webkit-border-radius: 0;
     690.  -moz-border-radius: 0;
     691.  border-radius: 0;

notice how above the vendor prefix ones come before the non vendor prefix (which i've always seen how it should be), however below it recommends something different

Incorrect property order for rule ".subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover"

  Correct order below:

     703.  border-left: 0 none;
     704.  -webkit-border-bottom-left-radius: 4px;
     705.  border-bottom-left-radius: 4px;
     706.  -moz-border-radius-bottomleft: 4px;

reason?

@fat
fat commented May 19, 2012

hm... we've just always done it that way. No specific reason. Any reason not to do it that way?

@thezoggy

vendor specific prefixes should come before the official non vendor specific ones.. the issue is that you don't always follow this rule. in the output above, you see that border-radius works fine. but the non shorthand version does not. also it is an ugly one since its not a simple vendor prefix.. as you can see some do bottom-left some do bottomleft besides the vendor prefix..

now why the ordering matters: http://css-tricks.com/ordering-css3-properties/

@fat
fat commented Jul 11, 2012

oh sorry - i read this wrong initially. The reason is that recess is interpreting border-radius-bottomleft as a different property then border-bottom-left-radius. I suppose i could special case this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment