Often designers and developers see Refactoring front end user interfaces as a dreaded, monolithic task. Organization, architecture, clean up, optimization, and documentation all seem tedious and overwhelming. However, if you're armed with the right tools and a solid foundation, you may find refactoring to be actually quite fun. Learn some Sass, organization, and documentation tricks from a product designer's perspective. Start making refactoring a regular part of your design process and development workflows.

1. Refactoring
Web Interfaces
@JINA // DEVCONFU // JŪRMALA // 2014

2. @jina

3. Senior Product Designer

4. — PAUL SAFFO
“It used to be that designers made an object
and walked away. Today the emphasis must
shift to designing the entire life cycle.”

5. What is
refactoring?

6. Refactoring:
GETTING RID OF CODE SMELLS?

7. — SOME LIAR
“I always code perfectly
the first time.”

8. lack of clarity
confusion

9. no maintainability
inefficiency

10. duplication
bloat

11. Refactoring:
BUSY WORK?

12. Refactoring:
CHANGE THE STRUCTURE OF EXISTING CODE WITHOUT
CHANGING THE BEHAVIOR OF THAT CODE

13. My first large
major CSS refactor:

14. 2007–2008 // Apple Online Store

15. old styles // legacy CSS
new styles // basic font sizes, colors, & fonts
typography // basic font sizes, colors, & fonts
layout // grid, borders, backgrounds
overrides // temporary overrides for old styles
local styles // localization
context styles // styles for stores for b2b, education, etc.

16. Too bad I wasn’t
using Sass then…

18. 2010–2011 // AppCloud

19. Nesting
USE (CAREFULLY) TO AVOID REPETITION

20. If you’re nesting more than
3 levels deep, you’re probably
doing something wrong.

21. Variables
STORE COMMON ATTRIBUTES FOR MAINTAINABILITY

22. Mixins
STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

23. @mixin mod($txt: #ccc) {
background: #111;
color: $txt;
}
body { @include mod; }
h1 { @include mod(#888); }
body {
background: #111;
color: #ccc;
}
h1 {
background: #111;
color: #888888;
}
SCSS Output

24. @extend
CHAIN SELECTORS TOGETHER

25. .message {
padding: 1em;
a { color: #369; }
}
.error {
@extend .message;
color: #eee;
}
.message, .error {
padding: 1em;
}
.message a, .error a {
color: #369;
}
.error {
color: #eee;
}
SCSS Output

26. Placeholder
Selectors
CREATE SILENT CLASSES FOR @EXTEND

27. %grid-1 { width: 240px; }
%grid-2 { width: 480px; }
.content {
@extend %grid-1;
color: #369;
}
.main {
@extend %grid-1;
background: #eee;
}
.content, .main {
width: 240px;
}
.content {
color: #369;
}
.main {
background: #eee;
}
SCSS Output

28. ZOMG!

29. Refactoring, Sass,
& Style Guides are
awesome together!

30. Engine Yard App Cloud Style Guide, Early 2011

31. blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides

32. 2012–2013 // Web App & Web Site

33. Make Refactoring
a regular part of
your workflow.
01 //

34. Don’t try to refactor
everything at once.
YOU’LL LIKELY GIVE UP.

35. Refactor
going forward.

36. Making
something new?
Document it.

37. Revising something?
Refactor it.
Then document it.

38. If code style preferences
are agreed upon,
document it.

39. Do you have a
CSS Gatekeeper?

40. Document
your ideal CSS
Architecture.
02 //

41. smacss.com

42. Do Web App “Deathstar”

43. Do Website “Kenobi”

44. deathstar.sass kenobi.sass

45. deathstar.sass kenobi.sass

46. deathstar.sass kenobi.sass

47. deathstar.sass kenobi.sass

48. deathstar.sass kenobi.sass

49. vendor // third party libraries

50. @import compass
@import susy
@import breakpoint
vendor/_shared.sass

51. compass-style.org

52. susy.oddbird.net

53. breakpoint-sass.com

54. // ------------------------
// VENDOR
@import vendor/shared
@import bootstrap/variables
@import bootstrap/mixins
// ------------------------
// VENDOR
@import vendor/shared
deathstar.sass kenobi.sass

55. vendor
dependencies // Global variables, mixins, & functions

56. @import color
@import type
@import layout
dependencies/_shared.sass

57. // ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/deathstar/themes
@import dependencies/deathstar/animations
// ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/kenobi/themes
deathstar.sass kenobi.sass

58. vendor
dependencies
base // Plain old semantic HTML

59. @include border-box-sizing
@import vendor/normalize
@import type
@import lists
@import tables
base/_shared.sass

60. // -----------------------
// BASE
@import base/shared
// -----------------------
// BASE
@import base/shared
@import base/kenobi/fonts
deathstar.sass kenobi.sass

61. vendor
dependencies
base
components // Modular components & states

62. @import icons
@import forms
@import buttons
@import toggles
@import messages
components/_shared.sass

63. // --------------------------------
// COMPONENTS
@import components/shared
@import components/deathstar/modals
// --------------------------------
// COMPONENTS
@import components/shared
deathstar.sass kenobi.sass

64. vendor
dependencies
base
components
regions // Divided page regions

65. // ------------------------------------
// REGIONS
@import regions/deathstar/banner
@import regions/deathstar/navigation
// ------------------------------------
// REGIONS
@import regions/kenobi/banner
@import regions/kenobi/complementary
@import regions/kenobi/contentinfo
deathstar.sass kenobi.sass

66. vendor
dependencies
base
components
regions
helpers // Layout helpers

67. @import layout-float
@import layout-display-table
@import visibility
helpers/_shared.sass

68. // --------------------------------
// HELPERS
@import helpers/shared
@import helpers/deathstar/sprites
// --------------------------------
// HELPERS
@import helpers/shared
deathstar.sass kenobi.sass

69. vendor
dependencies
base
components
regions
helpers
responsive // Adjustments to type & spacing

70. // --------------------------------
// RESPONSIVE
@import responsive/deathstar/mobile
@import responsive/deathstar/tablet
@import responsive/deathstar/screen
@import responsive/deathstar/retina
@import responsive/print
// --------------------------------
// RESPONSIVE
@import responsive/kenobi/mobile
@import responsive/kenobi/tablet
@import responsive/kenobi/screen
@import responsive/kenobi/retina
@import responsive/print
deathstar.sass kenobi.sass

71. _buttons.sass _screen.sass
_forms.sass
_modals.sass

72. vendor
dependencies
base
components
regions
helpers
responsive
tools // Visible grids & diagnostics

73. @import show-grid
@import diagnostics
tools/_shared.sass

74. <% if Rails.env.development? && Settings.show_grids %>
@import show-grid
@import diagnostics
<% end %>
tools/_shared.sass.erb

75. vendor/
dependencies/
base/
components/
regions/
helpers/
responsive/
tools/
}
PUT NEW CSS IN ITS PLACE
MOVE OLD CSS AS YOU GET TO
IT IN REVISIONS
MOVE MORE WHEN YOU
HAVE TIME TO WORK ON
TECH DEBT

76. Refactor when you’re adding something new.
Refactor when you’re fixing an issue.
Refactor during issues come up in code reviews.

77. Keep commits
focused & organized.
03 //

78. Bigger commits
lazy reviews

79. If you see something you want to fix that is
not within the scope of the current commit,
take note, and fix it in a new commit.

80. To debug, inspect at the
inner-most element
then work outward.

81. Find in Project (or GREP)
to determine if what you’re
editing is used anywhere else.

82. Check how your commit
affects the style guide.

83. Not in a style guide?
Put it in one!

84. Color
MAINTAINABILITY WITH SASS

85. Use your Sass Variables to
generate a living color
palette in your Style Guide.

86. Create a simple
color palette. Use
Sass to do variations.

87. $x: #369;
$y: #fff;
.a { color: lighten($x, 5%); }
.b { color: darken($x, 5%); }
.c { color: saturate($x, 5%); }
.d { color: grayscale($x ); }
.e { color: mix($x, $y); }
Just a few things Sass can do to your colors.

88. Make Variables for common
pairings of color & Sass
functions, and document it.

89. $black: #000;
$grey: #eee;
$white: invert($black);
$h-bg-color: $black;
$h-text-color: $grey;
$h-link-color: $white;
_colors.scss _header.scss

90. sassme.arc90.com

91. Make Mixins for common
pairings of backgrounds,
text colors, & shadow colors.

92. Typography:
CREATE A SMART SYSTEM & START MOVING TOWARD IT.

93. Choose a standard
base unit.
4 IS A GOOD BASE… IT MULTIPLIES INTO 8, 12, 16, ETC.

94. Create Mixins for
common type styles.
SPACED OUT CAPS, BIG QUOTE STYLES…
BUT DON’T HAVE TOO MANY. AND DOCUMENT THEM!

95. Don’t try to refactor
everything at once.
YOU’LL LIKELY GIVE UP.

96. Refactor
going forward.

97. — GUSTAVE FLAUBERT
“Be regular and orderly in your
life so that you may be violent
and original in your work.”

98. sfdc-styleguide.herokuapp.com

99. @SalesforceUX

100. dribbble.com/salesforce

101. sass-lang.com

102. @TeamSassDesign

103. dribbble.com/TeamSassDesign

104. themixinsf.com

105. susy.oddbird.net

106. T W I T T E R , D R I B B B L E , I N STAG RA M , & G I T H U B
@jina