DISPLACING WORST PRACTICES
(and making better CSS for all)
Pam Selle
@pamasaur
thewebivore.com
STORYTIME
No.
Yes.
THE PLAN
• What are the ‘worst practices’?
• Identifying
• Solving
• Practices for prevention
IDENTIFYING WORST
PRACTICES
REDUNDANCY
• Symptom: Declaring styles that are inherent, styles that negate
other ones in the chain.
• Solution: Take you...
REDUNDANCY
Prescription:
Mozilla Developer Network
REPETITION AND
DISORGANIZATION
• Symptom: See many of the same declarations over and over.
• Symptom: See styles being ove...
REPETITION AND
DISORGANIZATION
.blue-title { color: blue; font-size: 16px; font-
family: Arial }
.blue-content { color: bl...
h2 {
border-bottom: 1px solid #ddd;
padding: 10px 0;
float: left;
}
h2.other-title {
border-bottom:none;
padding:0 0 5px;
...
REPETITION AND
DISORGANIZATION
Prescription:
Refactoring, with a side of
architecture.
DETOUR INTO
PREPROCESSORS
• Favorite benefits of preprocessors:
• Partials (architecture)
• Extendables (in Sass 3.2) %
• S...
OVERSPECIFICITY
• Wasting your time and the browser’s time
.header .logo .title.name { }
#nav ul li a { }
.content a.title...
OVERSPECIFICITY
Prescription:
Understanding how browsers
interpret CSS.
HOW BROWSERS EVALUATE CSS
Resources:
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.m...
HOW BROWSERS EVALUATE CSS
Specificity:
1. Ids
2. Classes
3.Tags
4. Universals
From SpeciFISHity by Weyl
INVALID DECLARATIONS
• Symptom: Crossed out in web inspector, because it’s wrong,
not overridden.
• Symptom:A style is wri...
NO FALLBACKS
• Know what you support, and debug before you see it in the
browser.
• Most common with colors, so add a simp...
NO FALLBACKS
Common Suspects:
rgba()
linear-gradient
radial-gradient
box-shadow
position: absolute (forgetting a vertical ...
INLINE STYLES
The purpose of styles is to to separate
structure from presentation.
Oh, and it will also give you specificit...
DISPLACING WORST
PRACTICES
TRAIN EARLY AND OFTEN
TRAIN EARLY
• “Bootcamp”
• Presentations on full stack/tools
• Identify available resources
• Documentation, videos, usefu...
ONBOARDING
• Documentation, Documentation, Documentation
• Onboarding session
• Make past presentations available
KEEP IT UP
• Lightning talks
• Hack Days
• See “Zombies in My Workplace” for more ideas
• http://www.slideshare.net/sbastn...
STYLEGUIDES
TEXTUAL STYLEGUIDES
• Document!
• Style
• Idioms
• Structure
TEXTUAL STYLEGUIDES
• Public Styleguides
• Google: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
• Gi...
VISUAL STYLEGUIDES
• Visual Dictionary
• Explain visuals and usage
• Interface with visual designers
KSS
•Generated CSS documentation
http://warpspire.com/kss/
•Learn to generate your own styleguide:
http://warpspire.com/ks...
INTERACTIVE STYLEGUIDES
• Put your elements in full context
• Maintain a site-wide brand
• Reduce, Reuse, & Recycle
CODE REVIEW
INTRODUCING CODE REVIEW
• Use your styleguide/documentation as guideline
• Continues mentoring process
• Saves QA time by ...
MODULAR ORGANIZATION
INTRODUCING
ARCHITECTURE
• Consider pre-processors
• Consider your build process
• Consider adopting a methodology (OOCSS,...
FINAL INVENTORY
•Identify and repair misguided styles
•Tools to improve and embark on the joyous path
of maintainability
Thanks.
Pam Selle
thewebivore.com
@pamasaur
Displacing Worst Practices in CSS
Displacing Worst Practices in CSS
Displacing Worst Practices in CSS
Displacing Worst Practices in CSS
Upcoming SlideShare
Loading in...5
×

Displacing Worst Practices in CSS

539

Published on

Slides from a talk given at CSS Dev Conf 2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
539
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Displacing Worst Practices in CSS

  1. 1. DISPLACING WORST PRACTICES (and making better CSS for all) Pam Selle @pamasaur thewebivore.com
  2. 2. STORYTIME
  3. 3. No.
  4. 4. Yes.
  5. 5. THE PLAN • What are the ‘worst practices’? • Identifying • Solving • Practices for prevention
  6. 6. IDENTIFYING WORST PRACTICES
  7. 7. REDUNDANCY • Symptom: Declaring styles that are inherent, styles that negate other ones in the chain. • Solution: Take your freebies and remove things that don’t matter. div { display: block; } .my-class { display: block; float: left; } img { display: inline-block; } span { display: inline; } .nav { position: absolute; float: left; }
  8. 8. REDUNDANCY Prescription: Mozilla Developer Network
  9. 9. REPETITION AND DISORGANIZATION • Symptom: See many of the same declarations over and over. • Symptom: See styles being overridden in web inspector. • Symptom: Having to reset styles because of previous declarations.
  10. 10. REPETITION AND DISORGANIZATION .blue-title { color: blue; font-size: 16px; font- family: Arial } .blue-content { color: blue; font-size: 14px; font- family: Arial } .blue-title, .blue-content {color: blue; font- family: Arial; } .blue-title { font-size: 16px; } .blue-content { font-size: 14px; } %blue-thing {color: blue; font-family: Arial; } .blue-title { @extend %blue-thing; font-size: 16px; } .blue-content { @extend %blue-thing; font-size: 14px; }
  11. 11. h2 { border-bottom: 1px solid #ddd; padding: 10px 0; float: left; } h2.other-title { border-bottom:none; padding:0 0 5px; float:none; } .secondary-title { border-bottom: 1px solid #ddd; padding: 10px 0; float: left; } .other-title { padding:0 0 5px; }
  12. 12. REPETITION AND DISORGANIZATION Prescription: Refactoring, with a side of architecture.
  13. 13. DETOUR INTO PREPROCESSORS • Favorite benefits of preprocessors: • Partials (architecture) • Extendables (in Sass 3.2) % • Sprite benefits (Compass)
  14. 14. OVERSPECIFICITY • Wasting your time and the browser’s time .header .logo .title.name { } #nav ul li a { } .content a.title { } .logo > .title { } .nav li > a { } .content .title { }
  15. 15. OVERSPECIFICITY Prescription: Understanding how browsers interpret CSS.
  16. 16. HOW BROWSERS EVALUATE CSS Resources: https://developers.google.com/speed/docs/best-practices/rendering https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)
  17. 17. HOW BROWSERS EVALUATE CSS Specificity: 1. Ids 2. Classes 3.Tags 4. Universals From SpeciFISHity by Weyl
  18. 18. INVALID DECLARATIONS • Symptom: Crossed out in web inspector, because it’s wrong, not overridden. • Symptom:A style is written, but not rendering. (because it’s wrong) • Solution: ⌫.And read the MDN. .classy { background-position: inital initial; font: Arial; font: 14px/16px Arial sans-serif; padding: -10px; }
  19. 19. NO FALLBACKS • Know what you support, and debug before you see it in the browser. • Most common with colors, so add a simple color (background-, border-) declaration fallback. • Includes setting position properly -- a common problem in some browsers
  20. 20. NO FALLBACKS Common Suspects: rgba() linear-gradient radial-gradient box-shadow position: absolute (forgetting a vertical or horizontal position)
  21. 21. INLINE STYLES The purpose of styles is to to separate structure from presentation. Oh, and it will also give you specificity problems.
  22. 22. DISPLACING WORST PRACTICES
  23. 23. TRAIN EARLY AND OFTEN
  24. 24. TRAIN EARLY • “Bootcamp” • Presentations on full stack/tools • Identify available resources • Documentation, videos, useful tutorials • Mentoring
  25. 25. ONBOARDING • Documentation, Documentation, Documentation • Onboarding session • Make past presentations available
  26. 26. KEEP IT UP • Lightning talks • Hack Days • See “Zombies in My Workplace” for more ideas • http://www.slideshare.net/sbastn/zombies-in-my-workplace
  27. 27. STYLEGUIDES
  28. 28. TEXTUAL STYLEGUIDES • Document! • Style • Idioms • Structure
  29. 29. TEXTUAL STYLEGUIDES • Public Styleguides • Google: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml • GitHub: https://github.com/styleguide/css • ThinkUp: https://github.com/ginatrapani/ThinkUp/wiki/Code-Style-Guide:-CSS • Manifestos • Idiomatic CSS: https://github.com/necolas/idiomatic-css • SMACSS: http://smacss.com/
  30. 30. VISUAL STYLEGUIDES • Visual Dictionary • Explain visuals and usage • Interface with visual designers
  31. 31. KSS •Generated CSS documentation http://warpspire.com/kss/ •Learn to generate your own styleguide: http://warpspire.com/kss/styleguides/
  32. 32. INTERACTIVE STYLEGUIDES • Put your elements in full context • Maintain a site-wide brand • Reduce, Reuse, & Recycle
  33. 33. CODE REVIEW
  34. 34. INTRODUCING CODE REVIEW • Use your styleguide/documentation as guideline • Continues mentoring process • Saves QA time by reviewing before staging
  35. 35. MODULAR ORGANIZATION
  36. 36. INTRODUCING ARCHITECTURE • Consider pre-processors • Consider your build process • Consider adopting a methodology (OOCSS, etc.) • Measure everything • Interface with visual design strategy
  37. 37. FINAL INVENTORY •Identify and repair misguided styles •Tools to improve and embark on the joyous path of maintainability
  38. 38. Thanks. Pam Selle thewebivore.com @pamasaur
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×