A Better Theme Process: Learning the Cascade
?
0 likes?826 views
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.
![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](https://image.slidesharecdn.com/wpsessions-abetterthemeprocess-learningthecascade-130918201502-phpapp02/85/A-Better-Theme-Process-Learning-the-Cascade-18-320.jpg)
A Better Theme Process: Learning the Cascade
- 1. Learning the Cascade A Better Theme Process Christopher Cochran @tweetsfromchris
- 3. Cascading Order Media Type Importance Specificity Declaration
- 4. all braille embossed handheld print projection @media rules Media Type Importance Specificity Declaration screen speech tty tv
- 5. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
- 6. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
- 7. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
- 8. Browser User Author User Agent Default Styles User Customizations Your Styles * * Media Type Importance Specificity Declaration
- 9. !Important * Media Type Importance Specificity Declaration
- 10. Browser User Author User Agent Default Styles User !important Customizations Your !important Styles Media Type Importance Specificity Declaration
- 11. (...but not too specific.) BE Specific Media Type Importance Specificity Declaration
- 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. 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. 1. Inline Styles SPECIFICITY ORDER Media Type Importance Specificity Declaration
- 15. 1. Inline Styles 2. IDs SPECIFICITY ORDER Media Type Importance Specificity Declaration
- 16. 1. Inline Styles 2. IDs 3. Classes and pseudo-classes SPECIFICITY ORDER Media Type Importance Specificity Declaration
- 17. 1. Inline Styles 2. IDs 3. Classes and pseudo-classes 4. Elements and pseudo-elements SPECIFICITY ORDER Media Type Importance Specificity Declaration
- 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. Declaration Order Media Type Importance Specificity Declaration body { color: #bada55; } .entry-title { color: #d0ab1e } ... body { color: #affec7; }
- 20. #affec7 Media Type Importance Specificity Declaration Body #d0ab1e .entry-title Outcome
- 21. Media Type Importance Specificity Declaration body { background: #fff; } @media (min-width: 760px) { body { background: #bada55; } } @media (min-width: 960px) { body { background: #affec7; } }
- 22. Some css values are inherited by the children of an element in the document tree. Inherence Media Type Importance Specificity Declaration
- 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. cascade + Inherence = Media Type Importance Specificity Declaration (+ Media Queries)
- 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. Flow With The Cascade It¡¯s a Beautiful Thing
- 28. MOBILE FIRSTContentFIRST Cause what exactly is ¡°mobile¡± anyways? «þink
- 29. Start with the Least Common Denominator
- 30. Design from the bottom up; from the content out.
- 31. DON¡¯T display: none; Don't limit experiences.
- 32. Accessible, Lean, Clean, Lightweight
- 33. Speed is !important Performance is Key (a fundamental component of user experience)
- 34. Today¡¯s average website takes 7s to load
- 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. Optimize
- 38. PREPROCESSORS ARE YOUR FRIEND SASS, Stylus, LESS
- 39. BE MODULAR «þink in terms of reusable parts to keep things simple and consistent.
- 40. grunt-contrib-concathttps://github.com/gruntjs/grunt-contrib-concat Combine multiple files into one output file
- 42. TEST, TEST, TEST
- 43. TEST
- 44. Don¡¯t just test Browsers, and Devices, But loading on different connectivity Definitely check out Network Link Conditioner for OS X
- 45. Q&A «þanks!