Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Practical Maintainable CSS

17,338 views

Published on

Natalie Downe from Clearleft specialises in creating high quality client-side code on agency deadlines. In this talk she shares her development process, from planning through to delivery of a full CSS system optimised for maintenance by a client. The talk includes CSS rules of thumb developed over seven years in the field, as well as tips for taming the beast that is Internet Explorer.

  • Thanks Natalie, I'll refer people to this constant, er, consistent, er .. all the time! :-)

    The 40 min Vimeo recording has a nice tempo and the Silverback screencap works really well. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Practical Maintainable CSS

  1. 1. Practical, maintainable CSS Natalie Downe, 4th March 2009 Thursday, March 5, 2009
  2. 2. Hello! Thursday, March 5, 2009
  3. 3. High quality code Thursday, March 5, 2009
  4. 4. beautiful and valid markup Thursday, March 5, 2009
  5. 5. semantic markup & class/id names Thursday, March 5, 2009
  6. 6. bulletproof Thursday, March 5, 2009
  7. 7. separate content, presentation & behaviour Thursday, March 5, 2009
  8. 8. for handover Thursday, March 5, 2009
  9. 9. on agency deadlines Thursday, March 5, 2009
  10. 10. Me Input Output I sit in the middle Thursday, March 5, 2009
  11. 11. Designs, Pattern Information Me portfolio architecture & & CSS system conversations I sit in the middle Thursday, March 5, 2009
  12. 12. RateMyArea Thursday, March 5, 2009
  13. 13. UX London Thursday, March 5, 2009
  14. 14. Clearleft Thursday, March 5, 2009
  15. 15. Tourdust Thursday, March 5, 2009
  16. 16. WWF Thursday, March 5, 2009
  17. 17. Designs, Information Me architecture Output & conversations Input Thursday, March 5, 2009
  18. 18. The design Thursday, March 5, 2009
  19. 19. Server-side Designer developers Me Conversations Thursday, March 5, 2009
  20. 20. ... with the designer Liquid, elastic or fixed? What’s the minimum content scenario? Missing abstracts, images etc. Will there be themed sections? How should we deal with text wrapping e.g. in navigation? Is there room for progressive enrichment on complex issues? Thursday, March 5, 2009
  21. 21. ... with the developers Will a CMS be involved? How much control do I have over the markup? Internationalisation - Arabic etc? RTL? How will themes be implemented? Doctype? Thursday, March 5, 2009
  22. 22. Liquid/Elastic/Fixed? Thursday, March 5, 2009
  23. 23. Liquid Thursday, March 5, 2009
  24. 24. Liquid Thursday, March 5, 2009
  25. 25. Elastic Thursday, March 5, 2009
  26. 26. Elastic Thursday, March 5, 2009
  27. 27. Vertigo is healthy on the web Thursday, March 5, 2009
  28. 28. Thursday, March 5, 2009
  29. 29. Planning Thursday, March 5, 2009
  30. 30. Aim: a mental map of how the core markup will fit together Thursday, March 5, 2009
  31. 31. Prototyping I prototype the missing pieces of the puzzle - the bits I don’t understand yet I’ll browser test these fully If they work, I’ll probably roll them in to the build (and hence save time later) Means I’m more confident estimating time, and talking to the server-side developers Paul sometimes prototypes to prove me wrong! Thursday, March 5, 2009
  32. 32. Page structure and common components Thursday, March 5, 2009
  33. 33. Thursday, March 5, 2009
  34. 34. header Thursday, March 5, 2009
  35. 35. primary content Thursday, March 5, 2009
  36. 36. secondary content Thursday, March 5, 2009
  37. 37. teaser Thursday, March 5, 2009
  38. 38. The grid Thursday, March 5, 2009
  39. 39. Diagrams Thursday, March 5, 2009
  40. 40. Lots of diagrams Thursday, March 5, 2009
  41. 41. Font size calculations Thursday, March 5, 2009
  42. 42. Heading levels Thursday, March 5, 2009
  43. 43. Identify common sizes for each heading level Override these on a case by case basis If you don’t plan this at the start you’ll have to redefine them far too often, and you make more work for yourself Thursday, March 5, 2009
  44. 44. Environment Thursday, March 5, 2009
  45. 45. Tools of the trade Subversion with Versions.app Fireworks TextMate ColorSchemer Studio CSSEdit Thursday, March 5, 2009
  46. 46. ColorSchemer Studio Thursday, March 5, 2009
  47. 47. CSSEdit Thursday, March 5, 2009
  48. 48. Firefox + extensions Firebug HTML Validator - http://icanhaz.com/firefox-validator Operator (for Microformats) YSlow Web development toolbar (for topographic view) Thursday, March 5, 2009
  49. 49. Topographic view Thursday, March 5, 2009
  50. 50. Topographic view Thursday, March 5, 2009
  51. 51. Testing environments Yahoo! Graded Browser Support VMWare Fusion Constantly test in: Firefox Opera Safari Internet Explorer 6 and 7 Thursday, March 5, 2009
  52. 52. 8 CSS rules of thumb Thursday, March 5, 2009
  53. 53. 8 CSS rules of thumb Thursday, March 5, 2009
  54. 54. 8 CSS rules of finger Thursday, March 5, 2009
  55. 55. 1. Think in terms of components, not pages Thursday, March 5, 2009
  56. 56. 2. Think about types of thing, not individual things Thursday, March 5, 2009
  57. 57. 3. Prefer classes to IDs Thursday, March 5, 2009
  58. 58. 4. Create composable classes Thursday, March 5, 2009
  59. 59. 5. Use descendent selectors to avoid redundant classes Thursday, March 5, 2009
  60. 60. <div class=quot;newsquot;> <h2 class=quot;news-headingquot;>Weasel wins tug of war</h2> <p>A weasel defeated an aardvark...</p> </div> h2.news-heading { color: weasel; } Thursday, March 5, 2009
  61. 61. <div class=quot;newsquot;> <h2>Weasel wins tug of war</h2> <p>A weasel defeated an aardvark...</p> </div> .news h2 { color: weasel; } Thursday, March 5, 2009
  62. 62. 6. Keep your selectors as short as possible Thursday, March 5, 2009
  63. 63. 7. Order your CSS rules loosely by specificity Thursday, March 5, 2009
  64. 64. 8. Prefer percentages for internal layout dimensions Thursday, March 5, 2009
  65. 65. Thursday, March 5, 2009
  66. 66. Rules of thumb 1. Think in terms of 6. Keep your selectors as short components, not pages as possible 2. Think about types of thing, 7. Order your CSS rules loosely not individual things by specificity 3. Prefer classes to IDs 8. Prefer percentages for internal layout dimensions 4. Create composable classes 5. Use descendent selectors to avoid redundant classes Thursday, March 5, 2009
  67. 67. Quality Assurance Thursday, March 5, 2009
  68. 68. Internet Explorer Avoid the inevitable IE sinking feeling: test constantly throughout development Use conditional comments to include a separate IE stylesheet Avoid hacks Don’t re-engineer everything just for IE - completely forking your solutions is a really bad idea Thursday, March 5, 2009
  69. 69. Internet Explorer Do I recognise it? Double margin float bug, I’m looking at you Validate markup and CSS Apply borders to innermost elements (compare with Firefox - topographical view is useful) hasLayout bug? Apply position:relative starting at the innermost element Search Google / css-discuss Reduce to the simplest possible non-working version Thursday, March 5, 2009
  70. 70. Stay strong... Thursday, March 5, 2009
  71. 71. Or pray to the elder gods Thursday, March 5, 2009
  72. 72. Grr... frickin’ IE! Or pray to the elder gods Thursday, March 5, 2009
  73. 73. Code reviews Thursday, March 5, 2009
  74. 74. Designs, Pattern Information Me portfolio architecture & & CSS system conversations Output Thursday, March 5, 2009
  75. 75. Pattern portfolio Smallest possible number of documents Expresses every component and layout structure Documents how the markup and CSS should be used Illustrates the project’s shared vocabulary Links to current stylesheets A powerful regression testing tool Thursday, March 5, 2009
  76. 76. Example Thursday, March 5, 2009
  77. 77. A CSS system Thursday, March 5, 2009
  78. 78. a CSS system ... involves a top down approach is personalised for an individual site incorporates a pattern portfolio of reusable markup patterns and CSS defines a shared vocabulary for developers Thursday, March 5, 2009
  79. 79. ? nat@natbat.net Thursday, March 5, 2009

×