Extend: the Ex

[davidkpiano]

Extend: the Ex

Type of Presentation

[ X ] Standard Length Talk [ ] Lightning Talk [ ] Workshop [ ] Moderated Discussion

Description

As 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.

Until now.

In 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.

Outline

• The past: how we've historically used @extend
• The present: how we've vilified @extend and used @mixin as a "performant" alternative
• The future: reconsidering @extend
• How does @extend really work?
  • Based on selector constraints and relationships
• What causes "selector explosion"?
  • Lenient constraints - descendant and general sibling combinators
• Why use @extend?
  • Explain difference between usages of @mixin and @extend
• Strategies and guidelines for @extend
  • Limit direct extension of selector (to as few times as possible)
  • Selectively extend traits (non-component classes) and consider mixins for short traits
  • Use @extend for maintaining selector relationships
  • Define relationships via %placeholders, not .classes
  • Represent one selector per placeholder in relationships, if possible
  • Avoid descendant and general sibling combinators with @extend
  • Use separate placeholders for "modifiers"
  • Use @extend inside similar media queries
  • Two intuitive strategies will be presented for this
  • Use @extend with :matches(), in the future.
• Performance concerns
  • Why performance is improved when using @extend properly
  • How using @extend haphazardly can harm performance
• Real life usage
  • Explanation of our company's extensive (pun intended) usage of @extend in our large-scale application, as well as in personal projects
• Conclusion - @extend is nothing to be afraid of, and @extend and @mixin are meant to coexist!

  Speaker Info

• Name : David Khourshid
• Location : Orlando, FL
• Contact : davidkpiano@gmail.com

  More Info

  Social Media:

• Twitter : @davidkpiano
• GitHub : davidkpiano
• Url(s) : codepen.io/davidkpiano

  Bio:

David 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.

Photo:

[elyseholladay]

:heart_eyes: now that's one hell of an outline!!

[roytomeij]

THIS! @extend is getting some tough love lately, and while some of it is warranted: a lot of people don't really understand when (not) to use it. That's a shame, because using the right tool for the job is always the smart thing to do. Seems like you've got that worked out. Would like to see :star: :star: :star:

[orangedrum]

I'm guilty of this. I, like many of us, need this talk!

[codingdesigner]

I like this one a lot

[elyseholladay]

Hi David!

Thank you so much for submitting to SassConf this year!

Unfortunately, we weren’t able to select your talk.

We had an incredible number of submissions this year: 81, in fact, enough to fill up over two weeks of Sassy goodness! But we only have two days, and we couldn’t pick everything.

If you have any questions at all about our selection process, your submission, or anything else at all, please reach out: elyse@sassconf.com and I’ll gladly give you more details.

Again, thank you for submitting. It’s people like you, who are willing to put themselves out there and work hard and submit and give talks that make it possible to even have SassConf. I hope you will submit again next year and continue to be part of the Sass community!

See you in November!