Refactoring css

33

description

Web development has evolved, grown and become increasingly complex; so has CSS code. This means that we have to adapt our tools and techniques for developing on the platform. We can improve existing CSS code if we use refactoring techniques with the help of new tools such as Sass (Syntactically Awesome Style Sheets) and Compass.

Transcript of Refactoring css

Page 1: Refactoring css
Page 2: Refactoring css

Ed CharbeneauSr. Web Developer for Sypris Solutions

Code PaLOUsa Co-ChairmanAuthor: Simple-TalkResponsiveMVC.net

Twitter: @EdCharbeneau

RefactoringCSS

Page 3: Refactoring css

CSS??

Page 4: Refactoring css

CSSS??

Page 5: Refactoring css

MenuDay 1

Chicken

RefactoringCSS

Page 6: Refactoring css

MenuDay 2

Chicken Sandwich

RefactoringCSS

Page 7: Refactoring css

MenuDay 3

Chicken SandwichSalad

RefactoringCSS

Page 8: Refactoring css

MenuDay 4

Chicken SandwichSaladSalsa

RefactoringCSS

Page 9: Refactoring css

MenuDay 5?

Chicken Salsa Salad Sandwich

Food Poisoning!

RefactoringCSS

Page 10: Refactoring css

Cooking bad code

Revision 1.menu .chicken { display: block }

RefactoringCSS

Page 11: Refactoring css

Cooking bad code

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

RefactoringCSS

Page 12: Refactoring css

Cooking bad code

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

RefactoringCSS

Page 13: Refactoring css

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

Page 14: Refactoring css

Maintainability & ReadabilityExtensibility

Improving performanceSemantics

Reasons to refactor

Page 15: Refactoring css

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

Page 16: Refactoring css

Extensibility

module

module

mod

ule

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

Modular programming & Portability

RefactoringCSS

Page 17: Refactoring css

Improving Performance

.min

Reduce page load times by reducing requests to the server

reque

st

RefactoringCSS

Page 18: Refactoring css

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

Semantic Layout

CSSvisual style

HTMLdocument

layout

header

article

aside column

row

menu

RefactoringCSS

Page 19: Refactoring css

Tools

Sass

CSSCompass (mixins)

compile

Page 20: Refactoring css

Sass overview

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

NestingVariables

Mixinshttp://sass-lang.com/

RefactoringCSS

Page 21: Refactoring css

Converting CSS to Sass

Conversion toolsWeb Workbench

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

RefactoringCSS

Page 22: Refactoring css

Cleaning up with variables

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

RefactoringCSS

Page 23: Refactoring css

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

Page 24: Refactoring css

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

Page 25: Refactoring css

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

Page 26: Refactoring css
Page 27: Refactoring css

Compass Overview

Collection of Sass Mixins

Common code that would otherwise be duplicated across other frameworks

and extensionshttp://compass-style.org/

RefactoringCSS

Page 28: Refactoring css

Using Compass

Replace standard boilerplate markup with Compass mixins

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

RefactoringCSS

Page 29: Refactoring css

Finalizing the project

.min

Bundle and minifyoutput_style = :compressed

RefactoringCSS

Page 30: Refactoring css

Does refactoring make sense?

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

Apply the patterns to new projects

Page 31: Refactoring css

Questions??

?

Page 33: Refactoring css