refactoring css
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
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