A Better Theme Process: Learning the Cascade

668 Aufrufe

Veröffentlicht am

WPSessions WordPress Theme Bootcamp: A Better Theme Process - Learning the Cascade. Learn how to utilize the cascading nature of CSS to your benefit, in creating a mobile first content focused theme.

Veröffentlicht in: Design, Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
668
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
22
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

A Better Theme Process: Learning the Cascade

  1. 1. Learning the Cascade A Better Theme Process Christopher Cochran @tweetsfromchris
  2. 2. CSSCascading Style Sheet
  3. 3. Cascading Order Media Type Importance Specificity Declaration
  4. 4. all braille embossed handheld print projection @media rules Media Type Importance Specificity Declaration screen speech tty tv
  5. 5. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
  6. 6. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
  7. 7. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
  8. 8. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
  9. 9. !Important * Media Type Importance Specificity Declaration
  10. 10. Browser User Author User Agent Default Styles User !important Customizations Your !important Styles Media Type Importance Specificity Declaration
  11. 11. (...but not too specific.) BE Specific Media Type Importance Specificity Declaration
  12. 12. Media Type Importance Specificity Declaration /* Don’t do this */ #content article .entry-header h2.entry-title { font: 400 1.5em/1.2 Bebas Neue, sans-serif; } /* Keep it simple */ .entry-title { font: 400 1.5em/1.2 Bebas Neue, sans-serif; }
  13. 13. Media Type Importance Specificity Declaration #content article .entry-header h2.entry-title { font: 400 1.5em/1.2 Bebas Neue, sans-serif; } To override this... IS Not FUN!
  14. 14. 1. Inline Styles SPECIFICITY ORDER Media Type Importance Specificity Declaration
  15. 15. 1. Inline Styles 2. IDs SPECIFICITY ORDER Media Type Importance Specificity Declaration
  16. 16. 1. Inline Styles 2. IDs 3. Classes and pseudo-classes SPECIFICITY ORDER Media Type Importance Specificity Declaration
  17. 17. 1. Inline Styles 2. IDs 3. Classes and pseudo-classes 4. Elements and pseudo-elements SPECIFICITY ORDER Media Type Importance Specificity Declaration
  18. 18. SPECIFICITY ORDER Media Type Importance Specificity Declaration * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ http://www.w3.org/TR/CSS2/cascade.html#specificity
  19. 19. Declaration Order Media Type Importance Specificity Declaration body { color: #bada55; } .entry-title { color: #d0ab1e } ... body { color: #affec7; }
  20. 20. #affec7 Media Type Importance Specificity Declaration Body #d0ab1e .entry-title Outcome
  21. 21. Media Type Importance Specificity Declaration body { background: #fff; } @media (min-width: 760px) { body { background: #bada55; } } @media (min-width: 960px) { body { background: #affec7; } }
  22. 22. Some css values are inherited by the children of an element in the document tree. Inherence Media Type Importance Specificity Declaration
  23. 23. Media Type Importance Specificity Declaration body { font: 16px/1.5 Georgia,Times,"Times New Roman",serif; color: #222; } p { /* font and color are inherited, and do not need to be redeclared, unless values need to be changed. */ margin: .625em 0 1.25em; }
  24. 24. cascade + Inherence = Media Type Importance Specificity Declaration (+ Media Queries)
  25. 25. Media Type Importance Specificity Declaration /* Default styles, applied to all media types. */ body { /* Base font size */ font: 16px/1.5 Minion Pro, serif; } .entry-title { font: 400 1.5em/1.2 Bebas Neue, sans-serif; /* 24px */ } @media (min-width: 760px) { body { /* Base font size for 760px+ */ font-size: 19px; } /* .entry-title = font-size: 29px; */ } @media (min-width: 960px) { body { /* Base font size for 960px+ */ font-size: 18px; } /* .entry-title = font-size: 27px; */ }
  26. 26. Flow With The Cascade It’s a Beautiful Thing
  27. 27. MOBILE FIRST ink
  28. 28. MOBILE FIRSTContentFIRST Cause what exactly is “mobile” anyways? ink
  29. 29. Start with the Least Common Denominator
  30. 30. Design from the bottom up; from the content out.
  31. 31. DON’T display: none; Don't limit experiences.
  32. 32. Accessible, Lean, Clean, Lightweight
  33. 33. Speed is !important Performance is Key (a fundamental component of user experience)
  34. 34. Today’s average website takes 7s to load
  35. 35. Today’s average website takes 7s to load More than a second will cause the user to interrupt their flow of thought, creating a poor experience.
  36. 36. Optimize
  37. 37. CSS selectors Use efficient
  38. 38. PREPROCESSORS ARE YOUR FRIEND SASS, Stylus, LESS
  39. 39. BE MODULAR ink in terms of reusable parts to keep things simple and consistent.
  40. 40. grunt-contrib-concathttps://github.com/gruntjs/grunt-contrib-concat Combine multiple files into one output file
  41. 41. grunt-contrib-cssminhttps://github.com/gruntjs/grunt-contrib-cssmin Minify CSS files
  42. 42. TEST, TEST, TEST
  43. 43. TEST
  44. 44. Don’t just test Browsers, and Devices, But loading on different connectivity Definitely check out Network Link Conditioner for OS X
  45. 45. Q&A anks!

×