{"action":"opened","issue":{"url":"https://api.github.com/repos/juwai/style-guide/issues/32","repository_url":"https://api.github.com/repos/juwai/style-guide","labels_url":"https://api.github.com/repos/juwai/style-guide/issues/32/labels{/name}","comments_url":"https://api.github.com/repos/juwai/style-guide/issues/32/comments","events_url":"https://api.github.com/repos/juwai/style-guide/issues/32/events","html_url":"https://github.com/juwai/style-guide/issues/32","id":148301956,"number":32,"title":"CSS declaration order","user":{"login":"HouCoder","id":5292143,"avatar_url":"https://avatars.githubusercontent.com/u/5292143?v=3","gravatar_id":"","url":"https://api.github.com/users/HouCoder","html_url":"https://github.com/HouCoder","followers_url":"https://api.github.com/users/HouCoder/followers","following_url":"https://api.github.com/users/HouCoder/following{/other_user}","gists_url":"https://api.github.com/users/HouCoder/gists{/gist_id}","starred_url":"https://api.github.com/users/HouCoder/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HouCoder/subscriptions","organizations_url":"https://api.github.com/users/HouCoder/orgs","repos_url":"https://api.github.com/users/HouCoder/repos","events_url":"https://api.github.com/users/HouCoder/events{/privacy}","received_events_url":"https://api.github.com/users/HouCoder/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-04-14T09:24:14Z","updated_at":"2016-04-14T09:24:14Z","closed_at":null,"body":"I discovered few CSS declaration order rules:\r\n\r\n1. [Code Guide by @mdo #CSS declaration order](http://mdo.github.io/code-guide/#css-declaration-order).\r\n\r\n1. [idiomatic-css#declaration-order](https://github.com/necolas/idiomatic-css#declaration-order).\r\n\r\n1. [Google HTML/CSS Style Guide#Declaration Order](https://google.github.io/styleguide/htmlcssguide.xml?showone=Declaration_Order#Declaration_Order)\r\n\r\n1. [Airbnb SCSS Ordering of property declarations](https://github.com/airbnb/css#ordering-of-property-declarations)\r\n\r\nBasically just 2 way:\r\n\r\n1. Order by group(Box-model, Visual, Positioning). In this way, more transparency in code and easier to understand the layout/behavior just by reading the code, the negative part of this way is hard to start, the development progress maybe slower at the beginning.\r\n\r\n1. Order by alphabet.Order by alphabet is pretty common in everywhere,it's brain-dead easy, the negative part is sometimes it make no sense in CSS, like:\r\n\r\n```css\r\n.foo {\r\n  border: 1px solid #000;\r\n  height: 30px;\r\n  line-height: 14px;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  padding: 1px;\r\n  width: 50px;\r\n  max-height: 50px;\r\n  max-width: 100px;\r\n}\r\n```\r\n\r\nFor readability reason, the `with` & `height` setting should be ordered like this:\r\n\r\n```css\r\n.foo {\r\n  /** ... **/\r\n  height: 30px;\r\n  max-height: 50px;\r\n  width: 50px;\r\n  max-width: 100px;\r\n  /** ... **/\r\n}\r\n```\r\n\r\nPersonally, I prefer order by group by follow the [Code Guide by @mdo #CSS declaration order](http://mdo.github.io/code-guide/#css-declaration-order).\r\n\r\n@juwai/site-dev What you guys think?"}}