CSS Systems

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

5 comments

Comments 1 - 5 of 5 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

113 Favorites & 3 Groups

CSS Systems - Presentation Transcript

  1. WRITING MAINTAINABLE CSS Natalie Downe | Barcamp London 5 28th September 2008 1
  2. WRITING MAINTAINABLE CSS Natalie Downe | Barcamp London 5 28th September 2008 2
  3. CSS SYSTEMS Natalie Downe | Barcamp London 5 28th September 2008 3
  4. I am an optimist 4
  5. so I am going to assume that 5
  6. you already write beautiful and valid markup 6
  7. you use semantic markup & class / id names 7
  8. you separate content, presentation & behavior 8
  9. because you care 9
  10. Maintainability in CSS? 10
  11. It’s not a solved problem. 11
  12. It’s not just about the future 12
  13. It’s about now 13
  14. CLEARLEFT High quality code To tight deadlines For handover to external developers 14
  15. CSS SYSTEMS 15
  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. 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. 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. 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. CSS Edit macrabbit.com/cssedit 20
  21. CSS Edit macrabbit.com/cssedit 21
  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. please look to my right for a moment 23
  24. please look to my right for a moment 24
  25. BEFORE YOU START So I have a design ... what now? 25
  26. look at the basics 26
  27. will it be liquid? elastic? or fixed? 27
  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. 29
  30. the grid 30
  31. draw diagrams 31
  32. lots of diagrams 32
  33. make calculations 33
  34. get inventive 34
  35. levels of headings 35
  36. 36
  37. page structure and components 37
  38. 38
  39. 39
  40. 40
  41. MAINTAINABILITY MYTHS Any existing ‘best practices’ or approaches? 41
  42. CSS frameworks 42
  43. Single line declaration blocks 43
  44. Selector based indentation 44
  45. colour.css / layout.css / typography.css 45
  46. ON YOUR MARKS ... You have your design and your plan - you’re all set! 46
  47. use the cascade 47
  48. div#page div.teaser ul.products li p.name 48
  49. ul.products p.name 49
  50. you love to float 50
  51. shorthand? 51
  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. 53
  54. background: url(\"w00t.png\") orange 0 50% repeat fixed; 54
  55. background: lime; 55
  56. background: url(\"rofl.gif\"); 56
  57. background-color: lime; background-image: url(\"rofl.png\"); 57
  58. PREPARE FOR THE WORST n00bs will one day be let loose on your code (accept it) 58
  59. clear your footer 59
  60. careful with dimensions 60
  61. watch your height 61
  62. hooks 62
  63. editable content 63
  64. sanitise text 64
  65. abstract your icons 65
  66. DESIGN TO AVOID DEBUGGING engineer your way around the browser 66
  67. Simultaneously develop 67
  68. dont re-engineer seperate solutions 68
  69. floating 69
  70. you need to set psuedo selectors on links 70
  71. buttons 71
  72. review 72
  73. HANDOVER what to give the client 73
  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. FINALLY 75
  76. ITS ALL ABOUT THE SYSTEM define it develop it maintain it communicate it 76
  77. THANK YOU 77
  78. ? 78

+ Natalie DowneNatalie Downe, 2 years ago

custom

28229 views, 113 favs, 98 embeds more stats

http://natbat.net/2008/Sep/28/css-systems/ - A CSS more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 28229
    • 10454 on SlideShare
    • 17775 from embeds
  • Comments 5
  • Favorites 113
  • Downloads 988
Most viewed embeds
  • 11317 views on http://natbat.net
  • 3088 views on http://ajaxian.com
  • 1227 views on http://woorkup.com
  • 554 views on http://www.cssnolanche.com.br
  • 366 views on http://www.candesprojects.com

more

All embeds
  • 11317 views on http://natbat.net
  • 3088 views on http://ajaxian.com
  • 1227 views on http://woorkup.com
  • 554 views on http://www.cssnolanche.com.br
  • 366 views on http://www.candesprojects.com
  • 266 views on http://higher.com.ua
  • 166 views on http://www.elholgazan.com
  • 87 views on http://blog.zog.org
  • 72 views on http://kratce.vzhurudolu.cz
  • 63 views on http://createordie.de
  • 56 views on http://www.red91.com
  • 42 views on http://usabilita.blogosfere.it
  • 37 views on http://webprogramming.tistory.com
  • 36 views on http://css.injun.ru
  • 34 views on http://sicross.blogspot.com
  • 29 views on http://entwickler.com
  • 29 views on http://blog.schaufler.ch
  • 26 views on http://east08.webdirections.org
  • 20 views on http://bertrandkeller.info
  • 20 views on http://www.hanrss.com
  • 19 views on http://trend21c.tistory.com
  • 19 views on http://feeds.feedburner.com
  • 19 views on http://blog.maxincube.com
  • 16 views on http://extjs.com
  • 15 views on http://juandedioz.blogspot.com
  • 11 views on http://www.diegofranciosi.com
  • 10 views on http://www.tableless.com.br
  • 6 views on http://idev.syzygy.net
  • 6 views on http://www.whitepixel.pl
  • 6 views on http://static.slideshare.net
  • 5 views on http://www.netvibes.com
  • 5 views on http://web-marketing.zako.org
  • 5 views on http://crane.tistory.com
  • 5 views on http://www.bertrandkeller.info
  • 4 views on http://wildfire.gigya.com
  • 4 views on http://www.web2vai.garciatec.com
  • 4 views on http://74.125.93.104
  • 3 views on http://www.felgner.ch
  • 3 views on http://blog.vzhurudolu.cz
  • 2 views on http://zeke.franco.name
  • 2 views on http://www.dougegen.de
  • 2 views on http://whitepixel.pl
  • 2 views on applewebdata://D2ED8166-38FA-4CBC-BBEB-8302CAA4AE10
  • 2 views on http://blog.ketankhairnar.com
  • 2 views on http://safe.tumblr.com
  • 2 views on http://www.webvai.com
  • 2 views on http://www.filescon.com
  • 2 views on http://www.ajaxian.com
  • 2 views on http://entwickler.de
  • 2 views on http://127.0.0.1:8795
  • 2 views on http://news.inter-svet.ru
  • 2 views on file://
  • 2 views on http://blog.lmjabreu.com
  • 2 views on http://www.kaichanvong.com
  • 2 views on http://www.nursing.edu.au
  • 1 views on http://74.125.93.132
  • 1 views on http://dariosalvelli.tumblr.com
  • 1 views on https://craftler.dyndns.org:1111
  • 1 views on http://localhost:8888
  • 1 views on http://www.cnblogs.com
  • 1 views on http://techgreen.wordpress.com
  • 1 views on http://blog.pinsop.com
  • 1 views on http://xss.yandex.net
  • 1 views on http://apprentieweb.blogspot.com
  • 1 views on http://www.colordeu.es
  • 1 views on http://www.barbarosalp.com
  • 1 views on http://74.125.77.132
  • 1 views on http://www.ohmrefresh.info
  • 1 views on http://translate.googleusercontent.com
  • 1 views on http://www.myvishwa.com
  • 1 views on http://www.feedhub.com
  • 1 views on http://blog.naver.com
  • 1 views on http://m.andric.us
  • 1 views on http://huibit05.com
  • 1 views on http://littleprince.dyndns.org
  • 1 views on http://zhuaxia.com
  • 1 views on http://www.newsgator.com
  • 1 views on http://localhost:9353
  • 1 views on http://arts9.com
  • 1 views on http://d-media.biz
  • 1 views on http://rdbcci:8100
  • 1 views on applewebdata://769DA6E8-5146-441A-B804-A5EFD524C71F
  • 1 views on http://webprog.yozmn.com
  • 1 views on http://localhost
  • 1 views on applewebdata://ABD355CF-822F-4FED-A564-982E8BFA8F15
  • 1 views on http://eduf.tumblr.com
  • 1 views on http://mikehudack.tumblr.com
  • 1 views on applewebdata://BBB40C9E-D4ED-4487-87C0-8D62EAF46CDD
  • 1 views on http://lj-toys.com
  • 1 views on http://feeds2.feedburner.com
  • 1 views on http://visualxmag.de
  • 1 views on http://74.125.43.113
  • 1 views on http://www.ajax-blog.com
  • 1 views on http://www.higher.com.ua
  • 1 views on http://www.rapidsharego.com
  • 1 views on http://grazr.com
  • 1 views on http://www.zhuaxia.com
  • 1 views on http://www.extjs.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories