CSS Systems

Slideshow Transcript

1. Slide 1: WRITING MAINTAINABLE CSS Natalie Downe | Barcamp London 5 28th September 2008 1
2. Slide 2: WRITING MAINTAINABLE CSS Natalie Downe | Barcamp London 5 28th September 2008 2
3. Slide 3: CSS SYSTEMS Natalie Downe | Barcamp London 5 28th September 2008 3
4. Slide 4: I am an optimist 4
5. Slide 5: so I am going to assume that 5
6. Slide 6: you already write beautiful and valid markup 6
7. Slide 7: you use semantic markup & class / id names 7
8. Slide 8: you separate content, presentation & behavior 8
9. Slide 9: because you care 9
10. Slide 10: Maintainability in CSS? 10
11. Slide 11: It’s not a solved problem. 11
12. Slide 12: It’s not just about the future 12
13. Slide 13: It’s about now 13
14. Slide 14: CLEARLEFT High quality code To tight deadlines For handover to external developers 14
15. Slide 15: CSS SYSTEMS 15
16. Slide 16: A CSS SYSTEM IS... a top down approach personalised for an individual site a reusable set of markup patterns and CSS looking at the overall stucture and individual components glossary of shared vocabulary for developers 16
17. Slide 17: ORDERING Rule blocks are loosely ordered by specificity, Elements, grouped by type of tag Classes, grouped by the effect they create IDs, grouped by the component they affect 17
18. Slide 18: GROUPING general styles body styles reset links headings other elements, tags helper styles forms notifications and errors consistant items with normally just one class page structure skeleton including page furniture, page components most of your styles will be in here overrides 18
19. Slide 19: GROUPING general styles body styles reset links headings other elements, tags helper styles forms notifications and errors consistant items with normally just one class page structure skeleton including page furniture, page components most of your styles will be in here overrides 19
20. Slide 20: CSS Edit macrabbit.com/cssedit 20
21. Slide 21: CSS Edit macrabbit.com/cssedit 21
22. Slide 22: CONDITIONAL COMMENTS Never use browser hacks Browser specific stylesheets for all versions of IE and another for IE6 and under If you have to entirely re-engineer for IE, overriding your standards ready CSS in a conditional comment, you’re Doing It Wrong 22
23. Slide 23: please look to my right for a moment 23
24. Slide 24: please look to my right for a moment 24
25. Slide 25: BEFORE YOU START So I have a design ... what now? 25
26. Slide 26: look at the basics 26
27. Slide 27: will it be liquid? elastic? or fixed? 27
28. Slide 28: MAINTAINABLE LAYOUT if you are using an em or fixed width layout, try to only set a width on the container, using percentages inside a max-width of 100% will stop your layout creeping out the side of the viewport up and down font size all the time be afraid of heights, vertigo is healthy on the web. NEVER use height in px on anything with text inside 28
29. Slide 29: 29
30. Slide 30: the grid 30
31. Slide 31: draw diagrams 31
32. Slide 32: lots of diagrams 32
33. Slide 33: make calculations 33
34. Slide 34: get inventive 34
35. Slide 35: levels of headings 35
36. Slide 36: 36
37. Slide 37: page structure and components 37
38. Slide 38: 38
39. Slide 39: 39
40. Slide 40: 40
41. Slide 41: MAINTAINABILITY MYTHS Any existing ‘best practices’ or approaches? 41
42. Slide 42: CSS frameworks 42
43. Slide 43: Single line declaration blocks 43
44. Slide 44: Selector based indentation 44
45. Slide 45: colour.css / layout.css / typography.css 45
46. Slide 46: ON YOUR MARKS ... You have your design and your plan - you’re all set! 46
47. Slide 47: use the cascade 47
48. Slide 48: div#page div.teaser ul.products li p.name 48
49. Slide 49: ul.products p.name 49
50. Slide 50: you love to float 50
51. Slide 51: shorthand? 51
52. Slide 52: p { font: 12px/14px sans-serif } p { font: 80% sans-serif } p { font: x-large/110% \"New Century Schoolbook\", serif } p { font: bold italic large Palatino, serif } p { font: normal small-caps 120%/120% fantasy } 52
53. Slide 53: 53
54. Slide 54: background: url(\"w00t.png\") orange 0 50% repeat fixed; 54
55. Slide 55: background: lime; 55
56. Slide 56: background: url(\"rofl.gif\"); 56
57. Slide 57: background-color: lime; background-image: url(\"rofl.png\"); 57
58. Slide 58: PREPARE FOR THE WORST n00bs will one day be let loose on your code (accept it) 58
59. Slide 59: clear your footer 59
60. Slide 60: careful with dimensions 60
61. Slide 61: watch your height 61
62. Slide 62: hooks 62
63. Slide 63: editable content 63
64. Slide 64: sanitise text 64
65. Slide 65: abstract your icons 65
66. Slide 66: DESIGN TO AVOID DEBUGGING engineer your way around the browser 66
67. Slide 67: Simultaneously develop 67
68. Slide 68: dont re-engineer seperate solutions 68
69. Slide 69: floating 69
70. Slide 70: you need to set psuedo selectors on links 70
71. Slide 71: buttons 71
72. Slide 72: review 72
73. Slide 73: HANDOVER what to give the client 73
74. Slide 74: THE IDEAL HANDOVER INCLUDES The markup scheme, a set of files demonstrating the different markup components The CSS itself Supporting documents that explain the system as clearly as possible A face to face meeting if possible 74
75. Slide 75: FINALLY 75
76. Slide 76: ITS ALL ABOUT THE SYSTEM define it develop it maintain it communicate it 76
77. Slide 77: THANK YOU 77
78. Slide 78: ? 78