Ed CharbeneauSr. Web Developer for Sypris Solutions

Code PaLOUsa Co-ChairmanAuthor: Simple-TalkResponsiveMVC.net

Twitter: @EdCharbeneau

RefactoringCSS

CSS??

CSSS??

MenuDay 1

Chicken

RefactoringCSS

MenuDay 2

Chicken Sandwich

RefactoringCSS

MenuDay 3

Chicken SandwichSalad

RefactoringCSS

MenuDay 4

Chicken SandwichSaladSalsa

RefactoringCSS

MenuDay 5?

Chicken Salsa Salad Sandwich

Food Poisoning!

RefactoringCSS

Cooking bad code

Revision 1.menu .chicken { display: block }

RefactoringCSS

Cooking bad code

Revision 1.menu .chicken { display: block }Revision 2.menu .chicken { float: left }

RefactoringCSS

Cooking bad code

Revision 1.menu .chicken { display: block }Revision 2.menu .chicken { float: left }Revision 3.menu .chicken { float: right }

RefactoringCSS

Cooking bad code

Revision 1.menu .chicken { display: block }Revision 2.menu .chicken { float: left }Revision 3.menu .chicken { float: right } Revision 4.menu .chicken { float: none !important } //food poisoning

RefactoringCSS

Maintainability & ReadabilityExtensibility

Improving performanceSemantics

Reasons to refactor

Maintainability & Readability

Smaller, more concise chunks of code

Semantic naming conventions

We need to make it easier for others to read our code, and to understand the intention behind it.

RefactoringCSS

Extensibility

module

module

mod

ule

Object Oriented Programming (OOP)Don’t Repeat Yourself (DRY)

Modular programming & Portability

RefactoringCSS

Improving Performance

.min

Reduce page load times by reducing requests to the server

reque

st

RefactoringCSS

Separation of Concerns (SoC), decoupling of CSS and HTML

Semantic Layout

CSSvisual style

HTMLdocument

layout

header

article

aside column

row

menu

RefactoringCSS

Tools

Sass

CSSCompass (mixins)

compile

Sass overview

Sass code .SCSS is a superset of CSSCSS is valid SCSS

NestingVariables

Mixinshttp://sass-lang.com/

RefactoringCSS

Converting CSS to Sass

Conversion toolsWeb Workbench

Online http://css2sass.heroku.com/Rename .css to .scss

RefactoringCSS

Cleaning up with variables

// Color variables $base-color: #d0d0d0; $accent-color: #0ca0c6; $highlight-color: #FFF; $contrast-color: #1e1e1e;

RefactoringCSS

Reusable modules with mixins

@mixin button-base($margin: 2px, $padding: 10px) { color: $contrast-color; background-color: $base-color; text-decoration: none; display: block; padding:$padding; margin: $margin; &:hover { background-color: $highlight-color; } }

RefactoringCSS

Cleaning up your HTML with semantic styles

<header id="master-header"> <div class=“row"> <h1 class="col third">Example</h1> <nav class="col two-thirds" id="primary"> Content… </nav> </div> </header>

#master-header > div { @include row; h1 { @include column($third); } nav#primary { @include column($two-thirds); } }

CSSHTM

L

RefactoringCSS

module

module

mod

ule

Prefixing an underscore to a Sass file name tells Sass we intend to import

the code as a module

No .css file is generated by the compiler

Partials and Imports

Directory / Files

/modules/_typography.scss/modules/_grid.scss

Site.scss

@import "modules/typography"; @import "modules/grid";

RefactoringCSS

Compass Overview

Collection of Sass Mixins

Common code that would otherwise be duplicated across other frameworks

and extensionshttp://compass-style.org/

RefactoringCSS

Using Compass

Replace standard boilerplate markup with Compass mixins

Site.scss//removed @import "modules/reset"; @import "compass/reset";

RefactoringCSS

Finalizing the project

.min

Bundle and minifyoutput_style = :compressed

RefactoringCSS

Does refactoring make sense?

Some projects may be too large or complexPractice refactoring with a smaller project first

Apply the patterns to new projects

Questions??

?

Resources

Reading– Refactoring CSS with Sass and Compass– Using SASS and Compass in ASP.Net MVC with Web Workbench

Code Samples– github.com/EdCharbeneau/RefactoringCSS/ (.NET MVC)– github.com/EdCharbeneau/RefactoringCSSWithSass (Platform

independent)

Tools– Web Workbench (Visual Studio Plugin)– Sass & Compass

RefactoringCSS