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.

2. Ed Charbeneau
Sr. Web Developer for Sypris Solutions
Code PaLOUsa Co-Chairman
Author: Simple-Talk
ResponsiveMVC.net
Twitter: @EdCharbeneau
Refactoring
CSS

3. CSS??

4. CSSS??

5. Menu
Day 1
Chicken
Refactoring
CSS

6. Menu
Day 2
Chicken Sandwich
Refactoring
CSS

7. Menu
Day 3
Chicken Sandwich
Refactoring
CSS

8. Menu
Day 4
Chicken Sandwich
Refactoring
CSS

9. Menu
Day 5?
Chicken Salsa Salad Sandwich
Food Poisoning!
Refactoring
CSS

10. Cooking bad code
Revision 1
.menu .chicken { display: block }
Refactoring
CSS

11. Cooking bad code
Revision 1
.menu .chicken { display: block }
Revision 2
.menu .chicken { float: left }
Refactoring
CSS

12. Cooking bad code
Revision 1
.menu .chicken { display: block }
Revision 2
.menu .chicken { float: left }
Revision 3
.menu .chicken { float: right }
Refactoring
CSS

13. 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
Refactoring
CSS

14. Maintainability & Readability
Extensibility
Improving performance
Semantics
Reasons to refactor

15. 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.
Refactoring
CSS

16. Extensibility
module
Object Oriented Programming (OOP)
Don’t Repeat Yourself (DRY)
Modular programming & Portability
Refactoring
CSS

17. Improving Performance
.min
Reduce page load times by reducing requests to the server
request
Refactoring
CSS

18. Separation of Concerns (SoC), decoupling of CSS and HTML
Semantic Layout
CSS
visual style
HTML
document
layout
article row
Refactoring
CSS

19. Tools
Sass
CSS
Compass
(mixins)
compile

20. Sass overview
Sass code .SCSS is a superset of CSS
CSS is valid SCSS
Nesting
Variables
Mixins
http://sass-lang.com/
Refactoring
CSS

21. Converting CSS to Sass
Conversion tools
Web Workbench
Online http://css2sass.heroku.com/
Rename .css to .scss
Refactoring
CSS

22. Cleaning up with variables
// Color variables
$base-color: #d0d0d0;
$accent-color: #0ca0c6;
$highlight-color: #FFF;
$contrast-color: #1e1e1e;
Refactoring
CSS

23. 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;
}
}
Refactoring
CSS

24. 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);
}
}
CSSHTML
Refactoring
CSS

25. module
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";
Refactoring
CSS

27. Compass Overview
Collection of Sass Mixins
Common code that would otherwise be duplicated
across other frameworks and extensions
http://compass-style.org/
Refactoring
CSS

28. Using Compass
Replace standard boilerplate markup with Compass
mixins
Site.scss
//removed @import "modules/reset";
@import "compass/reset";
Refactoring
CSS

29. Finalizing the project
.min
Bundle and minify
output_style = :compressed
Refactoring
CSS

30. Does refactoring make sense?
Some projects may be too large or complex
Practice refactoring with a smaller project first
Apply the patterns to new projects

31. Questions?
?
?

32. 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
Refactoring
CSS