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