Often designers and developers see Markup and CSS Refactoring as a dreaded, monolithic task. Organization, architecture, clean up, optimization, 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, markup, and documentation tips & tricks from a product designer’s perspective. Start making refactoring a regular part of your design process and development workflows.

1. Refactoring Web
User Interfaces
JINA BOLTON
CODEMOTION BERLIN // 2013
(CC BY-NC-SA 3.0)

2. PRODUCT DESIGNER

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

4. Creating pages

5. Creating pages

6. Creating systems

7. “I always write code
perfectly the first time.”
—NO ONE EVER

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

9. Lack of clarity ➤ Confusion

10. No maintainability ➤ Inefficiency

11. Duplication ➤ Bloat

12. Messy UI & CSS ➤ Messy UX

13. Get rid of code smells

14. Smell bad!

15. Refactoring is not just
code clean up.

16. Clarity
Maintainability
Efficiency
DRY
Quality

17. Refactoring & Style
Guides go together
perfectly.

18. alistapart.com/article/writingainterfacestyleguide

19. Style guides for writing,
design, & code

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

21. ENGINE YARD APP CLOUD, EARLY 2011

22. “A fractured process
makes for a fractured
user experience.”
—NATE FORTIN

23. Make Refactoring &
Documentation a regular
part of your review process.
01 //

24. Don’t try to document
everything at once.
You’ll likely give up.

25. Do document going
forward.

26. CSS Gatekeeper

27. Making something
new? Document it.

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

29. When code style preferences
come up in code reviews,
document it for reference in
later code reviews.

30. smacss.com

31. sass-lang.com

32. Nesting
USE (CAREFULLY) TO AVOID REPETITION

33. OUTPUT
.menu a {
color: #369;
&:hover {
color: #036;
.note & { color: #fff; }
}
}
.menu a { color: #369; }
.menu a:hover {
color: #036;
}
.note .menu a:hover {
color: #fff;
}
SCSS

34. OUTPUT
.menu a {
color: #369;
@media print {
color: #000;
}
}
.menu a { color: #369; }
@media print {
.menu a { color: #000; }
}
SCSS

35. OUTPUT
.menu {
border: 1px solid #eee {
top-color: #fff;
left: 0;
}
}
.menu {
border: 1px solid #eee;
border-top-color: #fff;
border-left: 0;
}
SCSS

36. If you’re nesting more than three
levels deep, you’re probably doing
something wrong. Refactor!

37. Variables
STORE COMMON ATTRIBUTES FOR MAINTAINABILITY

38. OUTPUT
$text: #444;
$bg: $text;
body { color: $text; }
aside { background: $bg; }
body { color: #444; }
aside { background: #444; }
SCSS

39. Mixins
STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

40. OUTPUT
@mixin mod($txt: #ccc) {
background: #111;
color: $txt;
}
body { @include mod; }
.box { @include mod(#888); }
body {
background: #111;
color: #ccc;
}
.box {
background: #111;
color: #888;
}
SCSS

41. Extend
CHAIN SELECTORS TOGETHER

42. OUTPUT
.message {
padding: 1em;
.content {
background: #111;
}
}
.error {
@extend .message;
color: #eee;
}
.message,
.error { padding: 1em; }
.message .content,
.error .content {
background: #111;
}
.error { color: #eee; }
SCSS

43. Placeholder
Selectors
CREATE SILENT CLASSES THAT DON’T GET OUTPUT

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

45. Document your ideal
CSS Architecture.
02 //

46. DO’S WEB APPLICATION

47. deathstar
DO’S WEB APPLICATION

48. DO’S WEBSITE

49. KenobiDO’S WEBSITE

50. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

51. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

52. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

53. KENOBI.CSS.SASSDEATHSTAR.CSS.SASS

54. VENDOR/_SHARED.SASS
@import compass
@import compass/layout
@import susy
KENOBI.CSS.SASS
@import vendor/shared
DEATHSTAR.CSS.SASS
@import bootstrap/variables
@import bootstrap/mixins
@import vendor/shared
01 // VENDOR LIBRARIES

55. compass-style.org

56. susy.oddbird.net
SUSY›‹

57. 01 //
DEPENDENCIES/_SHARED.SASS
@import metrics
@import typography
@import colors
@import themes
02 // DEPENDENCIES
VENDOR LIBRARIES
Globally used variables,
mixins, & functions

58. 01 //
FOUNDATION/_SHARED.SASS
@include border-box-sizing
@import ../vendor/normalize
@import base
03 // FOUNDATION
VENDOR LIBRARIES
02 // DEPENDENCIES
Plain old semantic
HTML

59. http://paulirish.com/2012/box-sizing-border-box-ftw/

60. necolas.github.com/normalize.css/
normalize

61. 01 //
KENOBI.CSS.SASS
@import foundation/shared
@import foundation/kenobi
DEATHSTAR.CSS.SASS
@import foundation/shared
03 // FOUNDATION
VENDOR LIBRARIES
02 // DEPENDENCIES
Kenobi has a different
font, so we override
them after importing
shared styles.

62. 01 //
COMPONENTS/_SHARED.SASS
@import icons
@import buttons
@import toggles
@import messages
@import pagination
04 // COMPONENTS
VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
Modular components
& their states.
These should be able to
be used anywhere.

63. 01 //
REGIONS/_SHARED.SASS
@import banner
@import navigation
@import complementary
@import contentinfo
05 // REGIONS
VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
04 // COMPONENTS
Page regions, named
after their class and role
names.

64. 01 //
HELPERS/_SHARED.SASS
@import nonsemantic-classes
@import placeholder-selectors
06 // HELPERS
VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
04 // COMPONENTS
05 // REGIONS
Non-semantic helpers

65. 01 //
RESPONSIVE/_SHARED.SASS
@import responsive/mobile
@import responsive/tablet
@import responsive/screen
07 // RESPONSIVE
VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
04 // COMPONENTS
05 // REGIONS
06 // HELPERS
Adjustments to type
sizes, grids, and images.

66. 01 //
@import tools/show-grid
08 // TOOLS
VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
04 // COMPONENTS
05 // REGIONS
06 // HELPERS
07 // RESPONSIVE

67. 01 //
<% if Rails.env.development? && Settings.show_grids %>
@import tools/show-grid
<% end %>
08 // TOOLS
VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
04 // COMPONENTS
05 // REGIONS
06 // HELPERS
07 // RESPONSIVE

68. Don’t try to refactor
everything at once.
You’ll likely give up.

69. Do refactor going
forward.

70. Refactor when you’re adding
something new.
Refactor when you’re fixing an issue.
Refactor during code reviews.

71. }
01 // VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
04 // COMPONENTS
05 // REGIONS
06 // HELPERS
07 // RESPONSIVE
08 // TOOLS
Put new CSS in the
proper place.
Move old CSS as you
come to it in refactors.
Have some tech debt
time? Move more CSS.

72. Stay organized!

73. app/views/layouts
components/
dependencies/
foundation/
helpers/
regions/
_banner.sass
_contentinfo.sass
responsive/
tools/
vendor/
deathstar.css.scss
kenobi.css.scss
components/
regions/
_banner.haml
_contentinfo.haml
deathstar.haml
kenobi.haml
app/assets/stylesheets

74. app/assets/javascripts
components/
dependencies/
foundation/
helpers/
regions/
responsive/
tools/
vendor/
deathstar.css.scss
kenobi.css.scss
components/
responsive/
tools/
vendor/
jquery.js
modernizr.js
deathstar.js.coffee
kenobi.js.coffee
app/assets/stylesheets

75. app/assets/images
components/
icons/
dependencies/
foundation/
helpers/
regions/
responsive/
tools/
vendor/
deathstar.css.scss
kenobi.css.scss
components/
icons/
textures/
logos/
regions/
vendor/
app/assets/stylesheets

76. Make a UI Library03 //

77. oocss.org

78. Content (text, lists, tables)
Navigation (tabs, pagination, filters,
sorters, indexes)
Status (progress, alerts, toasts)
Interaction (forms, pickers, modals,
drawers, toggles)
Icons (consider SVG or fonts)

79. Show object &
all associated states.

80. GUMBY FRAMEWORK’S UI KIT

81. Keep documentation
current & useful.

82. jacobrask.github.com/styledocco/

83. STYLEDOCCO USED ON BOOTSTRAP

84. Get to know the
tools you use.
04 //

85. USING CHROME INSPECTOR

86. Start at the element,
then work outwards.

87. Use the CSS editor to
debug quickly.

88. Don’t accidentally
refresh all your
changes away!

89. USING SUBLIME’S SEARCH TOOLS

90. COMMAND + P
to find things quickly

91. COMMAND + SHIFT + F
to see a full list of
results in your project

92. If the selector or image is not
used anywhere, it’s probably
safe to delete it.

93. Red is a wonderful
color to see during pull
request reviews!

94. Check how your changes affect the object
in the style guide.
If the object you’re refactoring isn’t in the
style guide, add it.
Validate & Test.

95. During larger
refactors, focus on
one area at a time.
05 //

96. Color
Typography
Layout

97. Color
MAINTAINABILITY WITH SASS & STYLE GUIDES

98. Create a simple color
palette. Use Sass to
make variations.

99. OUTPUT
$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);}
.a { color: #3973ac; }
.b { color: #2d5986; }
.c { color: #2e669e; }
.d { color: #666666; }
.e { color: #99b2cc; }
SCSS

100. Use your Sass variables to
generate a living color palette
in your style guide.

101. Make variables for common
pairings of colors & Sass color
functions, and document it.

102. ENGINE YARD APP CLOUD, EARLY 2011

103. _HEADER.SCSS
// Color palette
$black: #000;
$grey: #eee;
$white: invert($black);
$h-bg-color: $black;
$h-text-color: $grey;
$h-link-color: $white;
.header {
background: $h-bg-color;
color: $h-text-color;
a {
color: $h-link-color;
}
}
_COLORS.SCSS

104. sassme.arc90.com

105. Make mixins for common
pairings of background, text,
& shadow colors.

106. DO’S POP STRIPE

107. http://codepen.io/jina/pen/iosjp

108. PUKING RAINBOWS

109. Typography
CREATE A SMART SYSTEM

110. Choose a standard
base unit.
4 is good; it multiplies into 8, 12, 16, etc.

111. DEPENDENCIES/_TYPOGRAPHY.SASS
// For typography, spacing, & grids
$base-unit: 4px
// These are used by both Compass & Susy
$base-font-size: $base-unit * 4
$base-line-height: $base-font-size * 1.5

112. DEPENDENCIES/_TYPOGRAPHY.SASS
$font-size-x-small: $base-font-size * .75
$font-size-small: $base-font-size * .875
$font-size: $base-font-size / 1px
$font-size-large: $base-font-size * 1.125
$font-size-x-large: $base-font-size * 1.375
$font-size-xx-large: $base-font-size * 2.75
$line-height: $base-line-height / $base-font-size
$line-height-reset: 1

113. DEPENDENCIES/_TYPOGRAPHY.SASS
$sans-serif: Helvetica, Arial, sans-serif
$serif: Georgia, serif
$monospace: Menlo, Monaco, Consolas, monospace

114. Create mixins for your
various type styles.
Small and all caps, big quote styles, etc.
Don’t have too many. Document them.

115. Layout
REGIONS & GRID OPTIONS

116. Show layout structures:
top-level, category, and
detail/edit views.

117. starbucks.com/static/reference/styleguide/
layout_promo_a.aspx

118. BACKGROUNDS

119. BASELINE GRID

120. BOXES

121. GRID COLUMNS

122. ALL THE TOGGLES!

123. SUSY MAKES IT EASIER TO USE GRIDS

124. Try a responsive iframe
sandbox during
development.

125. USING IFRAMES TO DEVELOP FOR SMALLER SCREENS FIRST

126. Don’t try to refactor &
document everything
at once.
You’ll likely give up.

127. Do refactor & document going
forward, in iterations.

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

129. @jina

130. jina.me

131. artinmycoffee.com

132. DO.COM
@DOWORKTOGETHER

133. Thank you!