{"action":"created","issue":{"url":"https://api.github.com/repos/thoughtbot/bourbon/issues/704","labels_url":"https://api.github.com/repos/thoughtbot/bourbon/issues/704/labels{/name}","comments_url":"https://api.github.com/repos/thoughtbot/bourbon/issues/704/comments","events_url":"https://api.github.com/repos/thoughtbot/bourbon/issues/704/events","html_url":"https://github.com/thoughtbot/bourbon/pull/704","id":64023507,"number":704,"title":"Made clearfix addon an extend instead of an mixin","user":{"login":"maryisdead","id":14194,"avatar_url":"https://avatars.githubusercontent.com/u/14194?v=3","gravatar_id":"","url":"https://api.github.com/users/maryisdead","html_url":"https://github.com/maryisdead","followers_url":"https://api.github.com/users/maryisdead/followers","following_url":"https://api.github.com/users/maryisdead/following{/other_user}","gists_url":"https://api.github.com/users/maryisdead/gists{/gist_id}","starred_url":"https://api.github.com/users/maryisdead/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maryisdead/subscriptions","organizations_url":"https://api.github.com/users/maryisdead/orgs","repos_url":"https://api.github.com/users/maryisdead/repos","events_url":"https://api.github.com/users/maryisdead/events{/privacy}","received_events_url":"https://api.github.com/users/maryisdead/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-03-24T15:24:25Z","updated_at":"2015-04-24T17:37:53Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/thoughtbot/bourbon/pulls/704","html_url":"https://github.com/thoughtbot/bourbon/pull/704","diff_url":"https://github.com/thoughtbot/bourbon/pull/704.diff","patch_url":"https://github.com/thoughtbot/bourbon/pull/704.patch"},"body":"The clearfix addon requires no arguments so there's no need to implement it as a mixin. Implementing it as an extend will result in less CSS output (far less, depending on usage count). The proposed change includes a fallback as well.\r\n\r\nA more in-depth explanation can be found here: http://blog.teamtreehouse.com/a-better-clearfix-with-sass"},"comment":{"url":"https://api.github.com/repos/thoughtbot/bourbon/issues/comments/96008874","html_url":"https://github.com/thoughtbot/bourbon/pull/704#issuecomment-96008874","issue_url":"https://api.github.com/repos/thoughtbot/bourbon/issues/704","id":96008874,"user":{"login":"wardpenney","id":615249,"avatar_url":"https://avatars.githubusercontent.com/u/615249?v=3","gravatar_id":"","url":"https://api.github.com/users/wardpenney","html_url":"https://github.com/wardpenney","followers_url":"https://api.github.com/users/wardpenney/followers","following_url":"https://api.github.com/users/wardpenney/following{/other_user}","gists_url":"https://api.github.com/users/wardpenney/gists{/gist_id}","starred_url":"https://api.github.com/users/wardpenney/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wardpenney/subscriptions","organizations_url":"https://api.github.com/users/wardpenney/orgs","repos_url":"https://api.github.com/users/wardpenney/repos","events_url":"https://api.github.com/users/wardpenney/events{/privacy}","received_events_url":"https://api.github.com/users/wardpenney/received_events","type":"User","site_admin":false},"created_at":"2015-04-24T17:37:53Z","updated_at":"2015-04-24T17:37:53Z","body":"When a single declaration is extended more than say, 50 times, I have seen serious performance bugs in the browser. If it is used over 100 times, I've seen it crash Safari. Not to mention that it makes it a giant pain in the Chrome Dev Tools to see where it was coming from. Unless you have source maps on, it is hard to see from where it was extended.\r\n\r\nAlso, if you extend it from a CSS3 (or higher) declaration, and that declaration is not supported, the browser disregards the entire comma-separated list of selectors for that declaration. It becomes difficult to create fallbacks because they are all coupled together. \r\n\r\nAlso, Sass still has severe compilation performance issues when something is `@extend`ed from a deep nest. Not that it is a good idea to nest deeply anyway, but I've seen this exponentially increase dev compile times.\r\n\r\nIMO, CSS bloat has never really been a problem. Once gzipped, even the beefiest of CSS files barely breaks 50K. For something of that size, more concerning is the 4095 declaration count max in IE9. \r\n\r\nAll in all, in the last couple years, I've used `@extend` less and less. Now I only use it in patterns that are isolated into the same source file. Meaning, their usage is small and is not intended for use across the site. \r\n\r\nOh and finally, if load-order specificity is important to you, `@extend` renders CSS at the point it was first used. So something you think may be gaining specificity for later load order, may not (by surprise!)"}}