{"action":"opened","issue":{"url":"https://api.github.com/repos/SassConf/2015-austin-speaker-cfp/issues/21","labels_url":"https://api.github.com/repos/SassConf/2015-austin-speaker-cfp/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/SassConf/2015-austin-speaker-cfp/issues/21/comments","events_url":"https://api.github.com/repos/SassConf/2015-austin-speaker-cfp/issues/21/events","html_url":"https://github.com/SassConf/2015-austin-speaker-cfp/issues/21","id":68450812,"number":21,"title":"Extend: the Ex","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},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-04-14T17:35:33Z","updated_at":"2015-04-14T17:35:33Z","closed_at":null,"body":"\r\n# Extend: the Ex\r\n\r\n## Type of Presentation\r\n[ X ] Standard Length Talk\r\n[  ] Lightning Talk\r\n[  ] Workshop\r\n[  ] Moderated Discussion\r\n\r\n## Description\r\n\r\nAs Sass developers, we have a love-hate relationship with the `@extend` directive. We've used it frequently to share styles and hierarchically create components, without giving it a second thought. That is, until we peeked at the generated CSS and saw the ensuing selector explosion. **Never again.** Now we've opted to avoid Sass `@extend` directive at all costs and use `@mixin` instead.\r\n\r\n*Until now.*\r\n\r\nIn this talk, we will discuss how `@extend` has been misunderstood, and how it can be **extremely useful** in well-organized, flexible, and scalable Sass projects, without any unexpected side effects or extraneous CSS.\r\n\r\n### Outline\r\n* The past: how we've historically used `@extend`\r\n* The present: how we've vilified `@extend` and used `@mixin` as a \"performant\" alternative\r\n* The future: reconsidering `@extend`\r\n* How does `@extend` *really* work?\r\n  * Based on **selector constraints** and **relationships**\r\n* What causes \"selector explosion\"?\r\n  * Lenient constraints - descendant and general sibling combinators\r\n* Why use `@extend`?\r\n  * Explain difference between usages of `@mixin` and `@extend`\r\n* Strategies and guidelines for `@extend`\r\n  * Limit direct extension of selector (to as few times as possible)\r\n  * Selectively extend traits (non-component classes) and consider mixins for short traits\r\n  * Use `@extend` for maintaining selector relationships\r\n  * Define relationships via `%placeholders`, not `.classes`\r\n  * Represent one selector per placeholder in relationships, if possible\r\n  * Avoid descendant and general sibling combinators with `@extend`\r\n  * Use separate placeholders for \"modifiers\"\r\n  * Use `@extend` inside similar media queries\r\n    * Two intuitive strategies will be presented for this\r\n  * Use `@extend` with `:matches()`, in the future.\r\n* Performance concerns\r\n  * Why performance is *improved* when using `@extend` properly\r\n  * How using `@extend` haphazardly can harm performance\r\n* Real life usage\r\n  * Explanation of our company's extensive (pun intended) usage of `@extend` in our large-scale application, as well as in personal projects\r\n* Conclusion - `@extend` is nothing to be afraid of, and `@extend` and `@mixin` are meant to coexist!\r\n\r\n## Speaker Info\r\n\r\n* Name      : David Khourshid\r\n* Location  : Orlando, FL\r\n* Contact   : davidkpiano@gmail.com\r\n\r\n## More Info\r\n\r\n##### Social Media:\r\n\r\n* Twitter   : [@davidkpiano](http://twitter.com/davidkpiano)\r\n* GitHub    : [davidkpiano](http://github.com/davidkpiano)\r\n* Url(s)    : [codepen.io/davidkpiano](http://codepen.io/davidkpiano)\r\n\r\n##### Bio:\r\n\r\nDavid Khourshid is a front-end web developer, speaker, and blogger in Orlando, Florida. He is passionate about JavaScript, Sass, and cutting-edge front-end technologies. He is also a pianist and enjoys mathematics, and is constantly finding new ways to apply both math and music theory to web development.\r\n\r\n##### Photo:\r\n\r\n![Avatar](http://i.imgur.com/SuZjhVh.jpg)\r\n"}}