{"action":"created","issue":{"url":"https://api.github.com/repos/jakubpawlowicz/clean-css/issues/573","labels_url":"https://api.github.com/repos/jakubpawlowicz/clean-css/issues/573/labels{/name}","comments_url":"https://api.github.com/repos/jakubpawlowicz/clean-css/issues/573/comments","events_url":"https://api.github.com/repos/jakubpawlowicz/clean-css/issues/573/events","html_url":"https://github.com/jakubpawlowicz/clean-css/issues/573","id":76436631,"number":573,"title":"Reordering media blocks to assist in media merging","user":{"login":"slindstr","id":224294,"avatar_url":"https://avatars.githubusercontent.com/u/224294?v=3","gravatar_id":"","url":"https://api.github.com/users/slindstr","html_url":"https://github.com/slindstr","followers_url":"https://api.github.com/users/slindstr/followers","following_url":"https://api.github.com/users/slindstr/following{/other_user}","gists_url":"https://api.github.com/users/slindstr/gists{/gist_id}","starred_url":"https://api.github.com/users/slindstr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/slindstr/subscriptions","organizations_url":"https://api.github.com/users/slindstr/orgs","repos_url":"https://api.github.com/users/slindstr/repos","events_url":"https://api.github.com/users/slindstr/events{/privacy}","received_events_url":"https://api.github.com/users/slindstr/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/jakubpawlowicz/clean-css/labels/Enhancement","name":"Enhancement","color":"5319e7"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-05-14T17:49:52Z","updated_at":"2015-05-15T10:37:37Z","closed_at":null,"body":"Hi!\r\n\r\nFirst off, I wanna say thanks for this; clean-css is really great!\r\n\r\nI wanted to float an idea by you guys to get your thoughts on what it would take to implement an option that would move media queries to the end of the CSS to assist in media merging. \r\n\r\nDoing this would require CSS rulesets to be authored in an order from most general to most specific so they embrace the cascade and build off each other:\r\n\r\n* normalizing styles\r\n* general styles\r\n    * headings\r\n    * paragraphs\r\n    * links\r\n    * etc.\r\n* reusable component classes\r\n    * buttons\r\n    * modals\r\n    * dropdowns\r\n    * etc.\r\n* layouts or container classes that contain components\r\n    * navbar\r\n    * search results (grid)\r\n    * search results (table)\r\n    * etc.\r\n\r\nAssuming that each of the sub-bullets is authored in a separate file and contains media queries relevant to only the code in that file, then in theory those media queries could:\r\n\r\n1. be extracted from their files (or single file if they've already been concatenated)\r\n2. tokenized by their media value and appended to a collection for the tokenized value in the order they appear\r\n3. for each collection of media values:\r\n    - merge all of the rulesets into one ruleset in the order they appear (looks like `AdvancedOptimizer.mergeMediaQueries` does this)\r\n    - append the newly merged media queries to the end of the stylesheets\r\n\r\nSince most CSS in the wild is written haphazardly, this option should default to being turned off. I could also see an option where the order of media queries can be specified rather than inferring it from the CSS.\r\n\r\nIf something like this can't be done, then I guess another solution would be to just author media queries in separate files, order them appropriately, and concatenate and minify them. This is kind of a bummer, though, because you lose the context of what's being styled differently in those media queries since they're separate.\r\n\r\nThis might be a pipe dream, but I wanted to get your thoughts. \r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/jakubpawlowicz/clean-css/issues/comments/102365330","html_url":"https://github.com/jakubpawlowicz/clean-css/issues/573#issuecomment-102365330","issue_url":"https://api.github.com/repos/jakubpawlowicz/clean-css/issues/573","id":102365330,"user":{"login":"jakubpawlowicz","id":24273,"avatar_url":"https://avatars.githubusercontent.com/u/24273?v=3","gravatar_id":"","url":"https://api.github.com/users/jakubpawlowicz","html_url":"https://github.com/jakubpawlowicz","followers_url":"https://api.github.com/users/jakubpawlowicz/followers","following_url":"https://api.github.com/users/jakubpawlowicz/following{/other_user}","gists_url":"https://api.github.com/users/jakubpawlowicz/gists{/gist_id}","starred_url":"https://api.github.com/users/jakubpawlowicz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jakubpawlowicz/subscriptions","organizations_url":"https://api.github.com/users/jakubpawlowicz/orgs","repos_url":"https://api.github.com/users/jakubpawlowicz/repos","events_url":"https://api.github.com/users/jakubpawlowicz/events{/privacy}","received_events_url":"https://api.github.com/users/jakubpawlowicz/received_events","type":"User","site_admin":false},"created_at":"2015-05-15T10:37:37Z","updated_at":"2015-05-15T10:37:37Z","body":"I think there's a long journey ahead to make it happen but we should do it in small steps. First one is having a basic semantic merging in 3.3.\r\n\r\nAny testing and ideas would be more than welcome! I'll ping you once it goes out into the wild."}}