Slaying the Dragon: Refactoring CSS Using Sass

[alicial]

Slaying the Dragon: Refactoring CSS Using Sass

Type of Presentation

• [X] Standard Length Talk

  Description

Refactoring is a practice that is often overlooked when it comes to CSS. As a result, styles seem to just grow and grow, until no one knows for sure which styles apply where, or whether many rules are still used at all. In this talk, we’ll cover strategies for refactoring CSS using Sass, with a focus on maintainability of code. Topics include code organization, naming, incremental change, and handling special cases such as responsive styles.

This talk is based on my experience refactoring thousands of lines of CSS into Sass, in a way that allowed for continuous feature development, as well as supporting multiple layers of responsive styles and device-specific styles.

The slides will contain fire-breathing dragons 🐉and kittens 🐱.

Outline:

• Define Goals
  • Why refactor?
• Foundations
  • Naming conventions
  • Different ways to DRY up code using Sass
  • Code organization
  • How to handle multiple layers of styling, e.g. responsive styles, device-specific styles
• Identifying Problems
  • Examples of different types of code smells
• How to go about refactoring
  • General principles of refactoring
  • Specific tactics for incremental refactors
  • Discussion about trade-offs

    Speaker Info (required)

• Name : Alicia Liu
• Location : San Francisco, CA
• Contact : me@alicialiu.me

  More Info

  Social Media:

• Twitter : @aliciatweet
• GitHub : alicial
• Url(s) : alicialiu.me

  Bio:

Alicia Liu is a full-stack software engineer who has been building websites and apps since IE5.5. Since cofounding her first company 8 years ago, she has been immersed in early-stage startups, working across all aspects of building web and mobile products from prototype to production. Alicia is currently the lead engineer at Coach.me, an app that helps people reach their goals through behavior design, community, and expert coaches. Outside of work, she writes and speaks on topics ranging from best practices in front-end development to diversity and culture in the tech industry. Alicia was presented with the 2014 ‘Woman to Watch’ award by Women Who Code, a global organization that helps women excel in technology careers.

Photo:

[misscs]

:100: to :dragon: and :cat:

Great proposal. Would you be open to giving this as a workshop?

[alicial]

@misscs sure! If I can get some guidance on what has worked well in the past, I'm sure it can be adapted well to suit the workshop format.