How I Style Sheet

Tips on CSS and pointers to some best practices and guides

Transcript

1. How I Style Sheet @gregmcintyre 2014
2. Ye Bad Olde Dayz
3. Repeated Values
4. Related Values
5. Repeated Selectors
6. Vendor Prefixes
7. Does Not Convey Intent
8. Cross Browser Pain
9. Specificity Wars
10. SASS (with Compass) ☑ DRY Values
 ☑ Calculate Values On-the-Fly
 ☑ DRY Selectors
 ☑ DRY Vendor Prefixes
 ☑ Convey Intent
 ☑ Cross Browser Compatibility
11. DRY Repeated Values
12. Calculate Values
13. DRYs Selectors
14. DRY Vendor Prefixes
15. Convey Intent
16. Cross Browserify
17. .scss or .sass ? Backwards compatibility with CSS Style rules on one line Looks like vomit
18. Ye Bad Newe Dayz
19. CSS is First Class Code Good naming Separation of concerns Code reviews Refactoring Bugs, verification, regressions
20. Good Code
    = Easy to Change Verifiable Reveals Intent DRY Concise
22. Split Concerns
23. “OO” CSS
24. Twitter Bootstrap
25. Zurb Foundation
26. OOCSS Benefits Project scalability Browser render speed
27. SMACSS
28. SMACSS Style Layers Baseline Layout Modules States
29. Baseline CSS
30. Layout CSS
31. Module CSS
32. State CSS
33. Mixins or OOCSS?
34. Semantics
35. Level of Abstraction
36. Do I Need Strict Content Semantics? Different and wildly different themes all at the same time? User edited markup? CMS?
37. SASS+OOCSS+SMACSS DRY selectors DRY values DRY media queries (@content) DRY vendor prefixes (Compass) Minimise amount of code Fast render speed Conventions Clear intent
38. Good luck out there @gregmcintyre 2014