Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Slaying the Dragon: Refactoring CSS Using Sass

292 views

Published on

Presented at FITC's Web Unleashed 2016 Conference
by Alicia Liu

FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc

Overview
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 Alicia's 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.

Objective

Learn strategies for refactoring CSS using Sass, focusing on maintainability.

Target Audience

Developers who are responsible for writing and maintaining CSS/Sass, especially in codebases that have been around for a while.

Assumed Audience Knowledge

CSS and Sass

Five Things Audience Members Will Learn

Reasons to refactor CSS
Code naming and organization conventions
Different ways to DRY up code with Sass
Identify problem areas that need refactoring
How to refactor incrementally

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Slaying the Dragon: Refactoring CSS Using Sass

  1. 1. SLAYING THE DRAGON Refactoring CSS for Maintainability Using Sass Alicia Liu @aliciatweet
  2. 2. CSS $#@%!
  3. 3. I eat man-hours for breakfast. RAWR. I’m cute. Play with me!
  4. 4. PREPARING FOR YOUR QUEST
  5. 5. to rewrites
  6. 6. Non-blocking Productive Not go crazy Goals
  7. 7. KNOW YOUR ENEMY
  8. 8. #header { position: relative; margin-bottom: 0; padding-top: 50px; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background: url(/images/backgrounds/fade.png) top left repeat-x; height: auto !important; } #header .container { background: url(/images/backgrounds/profile.png) 41px 0 repeat-y; padding-bottom: 25px; margin: 0 auto 0 auto; } #header_pic { position: absolute; top: 3px; left: 10px; margin-right: 20px; text-align: middle; margin-top: -7px; box- shadow: #C5C5C5 1px 1px 1px; -moz-box-shadow: #C5C5C5 1px 1px 1px; -webkit-box-shadow: #C5C5C5 1px 1px 1px; border: 2px solid white; border- radius: 999px; -webkit-border-radius: 999px; -moz-border-radius: 999px; } #header_pic img { width: 50px; height: 50px; border-radius: 999px; -webkit-border-radius: 999px; -moz-border-radius: 999px; } #header_info { margin-left: 100px; width: auto; max-width: 350px; margin-bottom: 5px; } #header_info_name { display: block; color: #5b5b5b; } #header_info_name:hover { text-decoration: none; } #header_info_challenge_name { font-size: 2.3em; font-weight: bold; line-height: 100%; } #header_momentum_gauge { position: absolute; top: 3px; left: 10px; } .tabs { position: absolute; top: 2px; left: 2px; width: 351px; border-radius: 5px 5px 0 0; padding: 12px 0 0 15px; margin 0 0 5px 0; height: 41px; list-style: none; background: #ecf0f0; box-shadow: #fff 0 3px 2px; -webkit-box-shadow: 0px 15px 15px white; -moz-box- shadow: white 0px 15px 15px; z-index: 5; } .tabs li { float: left; padding: 9px 22px 14px 22px; margin-right: 5px; font-size: 1.3em; border-radius: 5px 5px 0 0; - webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; color: #9c9c9c; cursor: pointer; } .tabs_selected { background: white; background: white; color: #333 !important; font-weight: bold; box-shadow: #C5C5C5 1px 1px 1px; position: relative; } .tabs_selected_cover { position: absolute; z-index: 2; background: white; bottom: -5px; left: 0; width: 100%; height: 5px; }
  9. 9. Warning Signs Over-reliance on IDs Generic class names Inconsistent vendor prefixing Too verbose ??? Formatting
  10. 10. Code Smells !important .header .group ul li a .header > #nav
  11. 11. Where? inline head duplicates
  12. 12. TOOLS & TACTICS
  13. 13. CSS WITH SUPERPOWERS
  14. 14. Choose Your Own Adventure
  15. 15. Style Guide
  16. 16. Colors Font sizes Buttons Device widths Etc. Design
  17. 17. px, em, rem, %, vw… white space Allow IDs? Max nesting level Code
  18. 18. scss-lint Linter + IDE = 💖 Use A Linter
  19. 19. BEM OOCSS SMACSS DIY Naming Convention
  20. 20. “There are only two hard things in Computer Science: cache invalidation and naming things.” Phil Karlton …and off-by-one errors
  21. 21. .loading .global-loading-indicator ✔ Be Specific
  22. 22. .red-alert .dialog-error-alert ✔ Semantic Names
  23. 23. .heading .sidebar-heading ✔ .sidebar-callout-heading ✔ Namespace
  24. 24. Separate Behavior Prefix .js- ✔ Data-attribute ✔
  25. 25. .menu.blue .menu.menu-cool ✔ Single Purpose Modifiers
  26. 26. Single Class <div class="menu menu-wide menu-blue"> .cool-menu { @include menu($blue); width: $menu-wide-width; //more styles here }
  27. 27. @extend? Author CSS > Output CSS
  28. 28. Code Organization @import 'third-party'; @import 'variables'; @import 'mixins'; @import 'fonts'; @import 'elements';
  29. 29. @import 'alerts'; @import 'buttons'; @import 'nav'; @import 'comments'; @import 'products'; @import 'footer'; @import 'responsive'; @import 'nav.responsive';
  30. 30. How many CSS Files? IE, webview, email, contexts …
  31. 31. EASY TO CHANGE
  32. 32. READY? REFACTOR!
  33. 33. STOP THE BLEEDING
  34. 34. LEAVE IT BETTER THAN YOU FOUND IT
  35. 35. ( °□°) ︵ Don’t Try To Do It All At Once
  36. 36. Moving & Adding Styles Create new files Don’t extend, duplicate Namespace your new styles (e.g. beta-) Or rename your deprecated styles
  37. 37. Deleting Styles Tools: uncss, grunt-ucss Regular expressions are your friend Search everywhere: JavaScript, HTML, backend code Test as you go
  38. 38. Asp.Net Python Ruby Javascript Java Objective-C C++ Perl Treat Css As Code
  39. 39. HAPPILY AFTER… Photo by Matteo maggionihttps://flic.kr/p/7BzbhK
  40. 40. Thanks! Alicia Liu @aliciatweet alicialiu.me/talks

×