Jina bolton - Refactoring Web Interfaces

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

— 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.”

Refactoring:
GETTING RID OF CODE SMELLS?

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

no maintainability
inefficiency

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

My first large
major CSS refactor:

2007–2008 // Apple Online Store

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.

Too bad I wasn’t
using Sass then…

Jina bolton - Refactoring Web Interfaces

Nesting
USE (CAREFULLY) TO AVOID REPETITION

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

Variables
STORE COMMON ATTRIBUTES FOR MAINTAINABILITY

Mixins
STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

@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

@extend
CHAIN SELECTORS TOGETHER

.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

Placeholder
Selectors
CREATE SILENT CLASSES FOR @EXTEND

%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

Refactoring, Sass,
& Style Guides are
awesome together!

Engine Yard App Cloud Style Guide, Early 2011

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

2012–2013 // Web App & Web Site

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

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

Making
something new?
Document it.

Revising something?
Refactor it.
Then document it.

If code style preferences
are agreed upon,
document it.

Document
your ideal CSS
Architecture.
02 //

vendor // third party libraries

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

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

vendor
dependencies // Global variables, mixins, & functions

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

// ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/deathstar/themes
@import dependencies/deathstar/animations
// ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/kenobi/themes

vendor
dependencies
base // Plain old semantic HTML

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

// -----------------------
// BASE
@import base/shared
// -----------------------
// BASE
@import base/shared
@import base/kenobi/fonts

vendor
dependencies
base
components // Modular components & states

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

// --------------------------------
// COMPONENTS
@import components/shared
@import components/deathstar/modals
// --------------------------------
// COMPONENTS
@import components/shared

vendor
dependencies
base
components
regions // Divided page regions

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

vendor
dependencies
base
components
regions
helpers // Layout helpers

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

// --------------------------------
// HELPERS
@import helpers/shared
@import helpers/deathstar/sprites
// --------------------------------
// HELPERS
@import helpers/shared

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

// --------------------------------
// 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

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

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

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

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

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

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

Keep commits
focused & organized.
03 //

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.

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

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

Check how your commit
affects the style guide.

Not in a style guide?
Put it in one!

Color
MAINTAINABILITY WITH SASS

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

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

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

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

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

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

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

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

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

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

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

Jina bolton - Refactoring Web Interfaces

More Related Content

Jina bolton - Refactoring Web Interfaces