SlideShare a Scribd company logo
1 of 41
Download to read offline
SLAYING
THE DRAGON
Refactoring CSS for Maintainability
Using Sass
Alicia Liu
@aliciatweet
CSS
$#@%!
I eat man-hours for
breakfast. RAWR.
I’m cute.
Play with me!
PREPARING
FOR YOUR
QUEST
to rewrites
Non-blocking
Productive
Not go crazy
Goals
KNOW
YOUR
ENEMY
#header		 	 	 	 	 	 	 	 	 	 	 {	position:	relative;	margin-bottom:	0;	padding-top:	50px;	border:	none;	-moz-box-shadow:	none;
-webkit-box-shadow:	none;	box-shadow:	none;	background:	url(/images/backgrounds/fade.png)	top	left	repeat-x;	height:	auto	!important;	}	
#header	.container		 	 	 	 	 {	background:	url(/images/backgrounds/profile.png)	41px	0	repeat-y;	padding-bottom:	25px;	margin:	0	auto	0	
auto;	}	
#header_pic									 	 	 	 	 {	position:	absolute;	top:	3px;	left:	10px;	margin-right:	20px;	text-align:	middle;	margin-top:	-7px;	box-
shadow:	#C5C5C5	1px	1px	1px;	-moz-box-shadow:	#C5C5C5	1px	1px	1px;	-webkit-box-shadow:	#C5C5C5	1px	1px	1px;	border:	2px	solid	white;	border-
radius:	999px;	-webkit-border-radius:	999px;	-moz-border-radius:	999px;	}	
#header_pic	img					 	 	 	 	 {	width:	50px;	height:	50px;	border-radius:	999px;	-webkit-border-radius:	999px;	-moz-border-radius:	
999px;	}	
#header_info								 	 	 	 	 {	margin-left:	100px;	width:	auto;	max-width:	350px;	margin-bottom:	5px;	}	
#header_info_name	 	 	 	 	 	 	 {	display:	block;	color:	#5b5b5b;	}	
#header_info_name:hover		 	 	 {	text-decoration:	none;	}	
#header_info_challenge_name	 	 {	font-size:	2.3em;	font-weight:	bold;	line-height:	100%;	}	
#header_momentum_gauge		 	 	 {	position:	absolute;	top:	3px;	left:	10px;	}	
.tabs																									{	position:	absolute;	top:	2px;	left:	2px;	width:	351px;	border-radius:	5px	5px	0	0;	padding:	12px	0	0	15px;	margin
0	0	5px	0;	height:	41px;	list-style:	none;	background:	#ecf0f0;	box-shadow:	#fff	0	3px	2px;	-webkit-box-shadow:	0px	15px	15px	white;	-moz-box-
shadow:	white	0px	15px	15px;	z-index:	5;	}	
.tabs	li																						{	float:	left;	padding:	9px	22px	14px	22px;	margin-right:	5px;	font-size:	1.3em;	border-radius:	5px	5px	0	0;	-
webkit-border-radius:	5px	5px	0	0;	-moz-border-radius:	5px	5px	0	0;	color:	#9c9c9c;	cursor:	pointer;	}	
.tabs_selected																{	background:	white;	background:	white;	color:	#333	!important;	font-weight:	bold;	box-shadow:	#C5C5C5	1px	1px	1px;
position:	relative;	}	
.tabs_selected_cover	 	 	 	 	 {	position:	absolute;	z-index:	2;	background:	white;	bottom:	-5px;	left:	0;	width:	100%;	height:	5px;	}
Warning
Signs
Over-reliance on IDs
Generic class names
Inconsistent vendor prefixing
Too verbose
??? Formatting
Code
Smells
!important	
.header	.group	ul	li	a	
.header	>	#nav
Where?
inline
head
duplicates
TOOLS &
TACTICS
CSS WITH SUPERPOWERS
Choose Your Own Adventure
Style Guide
Colors
Font sizes
Buttons
Device widths
Etc.
Design
px, em, rem, %, vw…
white space
Allow IDs?
Max nesting level
Code
scss-lint
Linter + IDE = 💖
Use A Linter
BEM
OOCSS
SMACSS
DIY
Naming
Convention
“There are only two hard things in
Computer Science:
cache invalidation and naming things.”
Phil Karlton
…and off-by-one errors
.loading		
.global-loading-indicator	✔
Be Specific
.red-alert		
.dialog-error-alert	✔
Semantic Names
.heading	
.sidebar-heading	✔	
.sidebar-callout-heading	✔
Namespace
Separate Behavior
Prefix	.js-	✔	
Data-attribute	✔
.menu.blue		
.menu.menu-cool	✔
Single Purpose Modifiers
Single Class
<div	class="menu	menu-wide	menu-blue">
.cool-menu	{	
		@include	menu($blue);	
		width:	$menu-wide-width;	
		//more	styles	here	
}
@extend?
Author CSS > Output CSS
Code Organization
@import	'third-party';	
@import	'variables';	
@import	'mixins';	
@import	'fonts';	
@import	'elements';
@import	'alerts';	
@import	'buttons';	
@import	'nav';	
@import	'comments';	
@import	'products';	
@import	'footer';	
@import	'responsive';	
@import	'nav.responsive';
How many CSS Files?
IE, webview, email, contexts …
EASY TO CHANGE
READY?
REFACTOR!
STOP THE BLEEDING
LEAVE IT
BETTER
THAN YOU
FOUND IT
( °□°) ︵
Don’t Try To Do It All At Once
Slaying the Dragon: Refactoring CSS Using Sass
Moving & Adding Styles
Create new files
Don’t extend, duplicate
Namespace your new styles (e.g. beta-)
Or rename your deprecated styles
Deleting Styles
Tools: uncss, grunt-ucss
Regular expressions are your friend
Search everywhere: JavaScript, HTML,
backend code
Test as you go
Asp.Net
Python
Ruby
Javascript
Java
Objective-C
C++
Perl
Treat Css As Code
HAPPILY
AFTER…
Photo by Matteo maggionihttps://flic.kr/p/7BzbhK
Thanks!
Alicia Liu
@aliciatweet
alicialiu.me/talks

More Related Content

Viewers also liked

“It’s all a matter of Perspective.” Incorporating Play to Help Solve Problems
“It’s all a matter of Perspective.” Incorporating Play to Help Solve Problems“It’s all a matter of Perspective.” Incorporating Play to Help Solve Problems
“It’s all a matter of Perspective.” Incorporating Play to Help Solve ProblemsFITC
 
Designing Interactive Experiences for Kids of All Ages with Mark Argo
Designing Interactive Experiences for Kids of All Ages with Mark ArgoDesigning Interactive Experiences for Kids of All Ages with Mark Argo
Designing Interactive Experiences for Kids of All Ages with Mark ArgoFITC
 
Customizing Your Process
Customizing Your ProcessCustomizing Your Process
Customizing Your ProcessFITC
 
Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas FeltonFITC
 
Why Everyone Should Own a Giant Robot Arm
Why Everyone Should Own a Giant Robot ArmWhy Everyone Should Own a Giant Robot Arm
Why Everyone Should Own a Giant Robot ArmFITC
 
Adapt or Die
Adapt or DieAdapt or Die
Adapt or DieFITC
 
Building Tools for the Next Web
Building Tools for the Next WebBuilding Tools for the Next Web
Building Tools for the Next WebFITC
 
Reinvent Your Creative Process with Collaborative Hackathons
Reinvent Your Creative Process with Collaborative HackathonsReinvent Your Creative Process with Collaborative Hackathons
Reinvent Your Creative Process with Collaborative HackathonsFITC
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with EmberFITC
 
(Re)aligning The Way 400,000 People Think
(Re)aligning The Way 400,000 People Think(Re)aligning The Way 400,000 People Think
(Re)aligning The Way 400,000 People ThinkFITC
 
A New Era for Animators
A New Era for AnimatorsA New Era for Animators
A New Era for AnimatorsFITC
 
Pocket web gl sk
Pocket web gl skPocket web gl sk
Pocket web gl skFITC
 
Web unleashed 2015-tammyeverts
Web unleashed 2015-tammyevertsWeb unleashed 2015-tammyeverts
Web unleashed 2015-tammyevertsFITC
 
From Box to Bots in Minutes
From Box to Bots in MinutesFrom Box to Bots in Minutes
From Box to Bots in MinutesFITC
 
When Clients Bare it All with David Allen
When Clients Bare it All with David AllenWhen Clients Bare it All with David Allen
When Clients Bare it All with David AllenFITC
 

Viewers also liked (15)

“It’s all a matter of Perspective.” Incorporating Play to Help Solve Problems
“It’s all a matter of Perspective.” Incorporating Play to Help Solve Problems“It’s all a matter of Perspective.” Incorporating Play to Help Solve Problems
“It’s all a matter of Perspective.” Incorporating Play to Help Solve Problems
 
Designing Interactive Experiences for Kids of All Ages with Mark Argo
Designing Interactive Experiences for Kids of All Ages with Mark ArgoDesigning Interactive Experiences for Kids of All Ages with Mark Argo
Designing Interactive Experiences for Kids of All Ages with Mark Argo
 
Customizing Your Process
Customizing Your ProcessCustomizing Your Process
Customizing Your Process
 
Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas Felton
 
Why Everyone Should Own a Giant Robot Arm
Why Everyone Should Own a Giant Robot ArmWhy Everyone Should Own a Giant Robot Arm
Why Everyone Should Own a Giant Robot Arm
 
Adapt or Die
Adapt or DieAdapt or Die
Adapt or Die
 
Building Tools for the Next Web
Building Tools for the Next WebBuilding Tools for the Next Web
Building Tools for the Next Web
 
Reinvent Your Creative Process with Collaborative Hackathons
Reinvent Your Creative Process with Collaborative HackathonsReinvent Your Creative Process with Collaborative Hackathons
Reinvent Your Creative Process with Collaborative Hackathons
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with Ember
 
(Re)aligning The Way 400,000 People Think
(Re)aligning The Way 400,000 People Think(Re)aligning The Way 400,000 People Think
(Re)aligning The Way 400,000 People Think
 
A New Era for Animators
A New Era for AnimatorsA New Era for Animators
A New Era for Animators
 
Pocket web gl sk
Pocket web gl skPocket web gl sk
Pocket web gl sk
 
Web unleashed 2015-tammyeverts
Web unleashed 2015-tammyevertsWeb unleashed 2015-tammyeverts
Web unleashed 2015-tammyeverts
 
From Box to Bots in Minutes
From Box to Bots in MinutesFrom Box to Bots in Minutes
From Box to Bots in Minutes
 
When Clients Bare it All with David Allen
When Clients Bare it All with David AllenWhen Clients Bare it All with David Allen
When Clients Bare it All with David Allen
 

More from FITC

Cut it up
Cut it upCut it up
Cut it upFITC
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital HealthFITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript PerformanceFITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech StackFITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR ProjectFITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerFITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday InnovationFITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight WebsitesFITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is TerrifyingFITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanFITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameFITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare SystemFITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignFITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of NowFITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAsFITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstackFITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForFITC
 

More from FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Recently uploaded

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 

Recently uploaded (12)

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 

Slaying the Dragon: Refactoring CSS Using Sass