• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
457
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DISPLACING WORST PRACTICES (and making better CSS for all) Pam Selle @pamasaur thewebivore.com
  • 2. STORYTIME
  • 3. No.
  • 4. Yes.
  • 5. THE PLAN • What are the ‘worst practices’? • Identifying • Solving • Practices for prevention
  • 6. IDENTIFYING WORST PRACTICES
  • 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. REDUNDANCY Prescription: Mozilla Developer Network
  • 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. 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. 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. REPETITION AND DISORGANIZATION Prescription: Refactoring, with a side of architecture.
  • 13. DETOUR INTO PREPROCESSORS • Favorite benefits of preprocessors: • Partials (architecture) • Extendables (in Sass 3.2) % • Sprite benefits (Compass)
  • 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. OVERSPECIFICITY Prescription: Understanding how browsers interpret CSS.
  • 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. HOW BROWSERS EVALUATE CSS Specificity: 1. Ids 2. Classes 3.Tags 4. Universals From SpeciFISHity by Weyl
  • 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. 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. NO FALLBACKS Common Suspects: rgba() linear-gradient radial-gradient box-shadow position: absolute (forgetting a vertical or horizontal position)
  • 21. INLINE STYLES The purpose of styles is to to separate structure from presentation. Oh, and it will also give you specificity problems.
  • 22. DISPLACING WORST PRACTICES
  • 23. TRAIN EARLY AND OFTEN
  • 24. TRAIN EARLY • “Bootcamp” • Presentations on full stack/tools • Identify available resources • Documentation, videos, useful tutorials • Mentoring
  • 25. ONBOARDING • Documentation, Documentation, Documentation • Onboarding session • Make past presentations available
  • 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. STYLEGUIDES
  • 28. TEXTUAL STYLEGUIDES • Document! • Style • Idioms • Structure
  • 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. VISUAL STYLEGUIDES • Visual Dictionary • Explain visuals and usage • Interface with visual designers
  • 31. KSS •Generated CSS documentation http://warpspire.com/kss/ •Learn to generate your own styleguide: http://warpspire.com/kss/styleguides/
  • 32. INTERACTIVE STYLEGUIDES • Put your elements in full context • Maintain a site-wide brand • Reduce, Reuse, & Recycle
  • 33. CODE REVIEW
  • 34. INTRODUCING CODE REVIEW • Use your styleguide/documentation as guideline • Continues mentoring process • Saves QA time by reviewing before staging
  • 35. MODULAR ORGANIZATION
  • 36. INTRODUCING ARCHITECTURE • Consider pre-processors • Consider your build process • Consider adopting a methodology (OOCSS, etc.) • Measure everything • Interface with visual design strategy
  • 37. FINAL INVENTORY •Identify and repair misguided styles •Tools to improve and embark on the joyous path of maintainability
  • 38. Thanks. Pam Selle thewebivore.com @pamasaur