{"action":"created","issue":{"url":"https://api.github.com/repos/rstacruz/rscss/issues/9","labels_url":"https://api.github.com/repos/rstacruz/rscss/issues/9/labels{/name}","comments_url":"https://api.github.com/repos/rstacruz/rscss/issues/9/comments","events_url":"https://api.github.com/repos/rstacruz/rscss/issues/9/events","html_url":"https://github.com/rstacruz/rscss/issues/9","id":57285663,"number":9,"title":"The recomendations of @extend are concerning","user":{"login":"jamesmacfie","id":1654201,"avatar_url":"https://avatars.githubusercontent.com/u/1654201?v=3","gravatar_id":"","url":"https://api.github.com/users/jamesmacfie","html_url":"https://github.com/jamesmacfie","followers_url":"https://api.github.com/users/jamesmacfie/followers","following_url":"https://api.github.com/users/jamesmacfie/following{/other_user}","gists_url":"https://api.github.com/users/jamesmacfie/gists{/gist_id}","starred_url":"https://api.github.com/users/jamesmacfie/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jamesmacfie/subscriptions","organizations_url":"https://api.github.com/users/jamesmacfie/orgs","repos_url":"https://api.github.com/users/jamesmacfie/repos","events_url":"https://api.github.com/users/jamesmacfie/events{/privacy}","received_events_url":"https://api.github.com/users/jamesmacfie/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-02-11T07:43:11Z","updated_at":"2015-10-05T18:27:41Z","closed_at":null,"body":"I like what you've got going here, but by using `@extend` when nested inside a descendent selector, the final comma separated CSS selectors can be a nightmare. Keeping final CSS output in mind is vital to successfully scaling any CSS/Sass solution.\r\n\r\nIf you're going to use `@extend` in different files for different components, then the final CSS selector can not only be a mess of selectors, but you also potentially create a relationship between classes that shouldn't have a relationship. You've advised putting all components in their own file (nice), but by linking classes via `@extend` then your final CSS and selectors are no longer grouped by component only; they're also grouped by some shared properties.\r\n\r\nIf you've decided that you want all the CSS properties of a class, then just add the class to the component instead of using `@extend`. You're final CSS output will be smaller, there's less need for sourcemaps to figure out where a rule came from (actually, I don't even know how well source maps deal with `@extend` to be honest), and the HTML becomes much clearer to any developer that views it.\r\n\r\nIgnoring that `.search-button` wouldn't be an ideal class name in the first place here, the HTML in your `@extend` example might become something like:\r\n\r\n``` html\r\n<div class='search-form'>\r\n  <input class='input' type='text'>\r\n  <button class='submit search-button -red -large'></button>\r\n</div>\r\n```"},"comment":{"url":"https://api.github.com/repos/rstacruz/rscss/issues/comments/145623335","html_url":"https://github.com/rstacruz/rscss/issues/9#issuecomment-145623335","issue_url":"https://api.github.com/repos/rstacruz/rscss/issues/9","id":145623335,"user":{"login":"davidkpiano","id":1093738,"avatar_url":"https://avatars.githubusercontent.com/u/1093738?v=3","gravatar_id":"","url":"https://api.github.com/users/davidkpiano","html_url":"https://github.com/davidkpiano","followers_url":"https://api.github.com/users/davidkpiano/followers","following_url":"https://api.github.com/users/davidkpiano/following{/other_user}","gists_url":"https://api.github.com/users/davidkpiano/gists{/gist_id}","starred_url":"https://api.github.com/users/davidkpiano/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidkpiano/subscriptions","organizations_url":"https://api.github.com/users/davidkpiano/orgs","repos_url":"https://api.github.com/users/davidkpiano/repos","events_url":"https://api.github.com/users/davidkpiano/events{/privacy}","received_events_url":"https://api.github.com/users/davidkpiano/received_events","type":"User","site_admin":false},"created_at":"2015-10-05T18:27:41Z","updated_at":"2015-10-05T18:27:41Z","body":"Take a look at this: http://www.smashingmagazine.com/2015/05/extending-in-sass-without-mess\r\n\r\nIt's very much inline with RSCSS and the selectors can easily adapt RSCSS syntax to fit the guidelines suggested above. `@extend` is very useful when used correctly."}}