Displacing Worst Practices in CSS
- 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
- 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; }
- 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 { }
- 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.
- 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
- 30. 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/
- 31. VISUAL STYLEGUIDES • Visual Dictionary • Explain visuals and usage • Interface with visual designers
- 33. KSS •Generated CSS documentation http://warpspire.com/kss/ •Learn to generate your own styleguide: http://warpspire.com/kss/styleguides/
- 34. INTERACTIVE STYLEGUIDES • Put your elements in full context • Maintain a site-wide brand • Reduce, Reuse, & Recycle
- 37. CODE REVIEW
- 38. INTRODUCING CODE REVIEW • Use your styleguide/documentation as guideline • Continues mentoring process • Saves QA time by reviewing before staging
- 40. INTRODUCING ARCHITECTURE • Consider pre-processors • Consider your build process • Consider adopting a methodology (OOCSS, etc.) • Measure everything • Interface with visual design strategy
- 41. FINAL INVENTORY •Identify and repair misguided styles •Tools to improve and embark on the joyous path of maintainability