{"action":"created","issue":{"url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/21","labels_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/21/comments","events_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/21/events","html_url":"https://github.com/tmpworldwide/tmpworldwide.github.io/issues/21","id":96843804,"number":21,"title":"SCSS organization: Different Strokes for Different Folks","user":{"login":"sylviakates","id":11216573,"avatar_url":"https://avatars.githubusercontent.com/u/11216573?v=3","gravatar_id":"","url":"https://api.github.com/users/sylviakates","html_url":"https://github.com/sylviakates","followers_url":"https://api.github.com/users/sylviakates/followers","following_url":"https://api.github.com/users/sylviakates/following{/other_user}","gists_url":"https://api.github.com/users/sylviakates/gists{/gist_id}","starred_url":"https://api.github.com/users/sylviakates/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sylviakates/subscriptions","organizations_url":"https://api.github.com/users/sylviakates/orgs","repos_url":"https://api.github.com/users/sylviakates/repos","events_url":"https://api.github.com/users/sylviakates/events{/privacy}","received_events_url":"https://api.github.com/users/sylviakates/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-07-23T15:44:03Z","updated_at":"2015-07-23T16:29:12Z","closed_at":null,"body":"In the meeting today, the topic of organizing SCSS 'wrong' came up, where it was stated that media queries should be put inside each individual element, instead of grouped all in the same place for each section of the page. I guess the speaker believed that things are 'more organized' this way. \r\n\r\nI noticed that this is the way the default SCSS is laid out in the 2.0 system, and I re-arrange it every time, because it feels *less* organized to me than grouping elements inside break points. \r\n\r\nWhen I am imagining a certain section of a site in my head, I don't picture it in terms of \"this element changes this way on screen size change, this element changes this other way on screen size change, this other element changes this way on screen size change.\" I picture it in terms of \"This section of the page looks like this on mobile. On screen size change, this entire section looks like that.\" It feels more like I am hunting and pecking for what to modify when I am working with code where the media queries are scattered throughout elements, than it does when it's all grouped together underneath the media queries. \r\n\r\nPlus, when I develop, I develop for one screen size at a time. First I write all of my code for mobile. Then I make the screen size bigger, and write it for tablet, then I write the code for desktop. It just makes sense to me to copy and paste what I already wrote for the smaller sizes, put them underneath their parent media queries, and tweak the attributes based on the next screen size. \r\n\r\nI especially prefer it this way because the styles that are inside media queries usually depend on one another being present to make sense. This element becomes 30% wide at desktop size, this other element becomes 70% wide. I like having those two declarations next to each other in the code, because they happen at the same 'time', in both development, and in my re-sizing of the window.\r\n\r\nI respect that others might feel differently. When I am working on another person's code and I see that their code follows the scattered-media-queries technique, I respect it, though I find it confusing and more time consuming to work in that mode for too long. \"Oh, I have to tweak the width to 67% here, I guess I have to go find where that 30% is and tweak it up a few points, wherever it is.\"\r\n\r\nI propose that we not try to standardize this. The rule should be to try not to mess with someone else's organizational scheme when you are collaborating, and to try to be consistent with your personal organizational scheme.\r\n\r\n Neither is 'bad' code, some people work faster in one way than in the other. They are just two different ways of handling the same problem. "},"comment":{"url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/comments/124160139","html_url":"https://github.com/tmpworldwide/tmpworldwide.github.io/issues/21#issuecomment-124160139","issue_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/21","id":124160139,"user":{"login":"michaelspellacy","id":468009,"avatar_url":"https://avatars.githubusercontent.com/u/468009?v=3","gravatar_id":"","url":"https://api.github.com/users/michaelspellacy","html_url":"https://github.com/michaelspellacy","followers_url":"https://api.github.com/users/michaelspellacy/followers","following_url":"https://api.github.com/users/michaelspellacy/following{/other_user}","gists_url":"https://api.github.com/users/michaelspellacy/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelspellacy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelspellacy/subscriptions","organizations_url":"https://api.github.com/users/michaelspellacy/orgs","repos_url":"https://api.github.com/users/michaelspellacy/repos","events_url":"https://api.github.com/users/michaelspellacy/events{/privacy}","received_events_url":"https://api.github.com/users/michaelspellacy/received_events","type":"User","site_admin":false},"created_at":"2015-07-23T16:29:12Z","updated_at":"2015-07-23T16:29:12Z","body":"To nest media queries or not to nest media queries, that is the question. Big fan of the nest here from a maintenance perspective, but I agree it is a matter of preference and that no one way is the right way. We could (strongly) recommend that nesting be used if majority agrees to that, but it is not something I would personally call out in a code review as being wrong. "}}