a better theme process: learning the cascade
DESCRIPTION
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.TRANSCRIPT
![Page 1: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/1.jpg)
Learning the CascadeA Better Theme Process
Christopher Cochran@tweetsfromchris
![Page 2: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/2.jpg)
CSSCascading Style Sheet
![Page 3: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/3.jpg)
CascadingOrder
Media Type Importance Speci!city Declaration
![Page 4: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/4.jpg)
allbrailleembossedhandheldprintprojection
@media rules
Media Type Importance Speci!city Declaration
screenspeechttytv
![Page 5: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/5.jpg)
Browser
User
Author
User Agent Default Styles
User Customizations
Your Styles
*
*
Media Type Importance Speci!city Declaration
![Page 6: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/6.jpg)
Browser
User
Author
User Agent Default Styles
User Customizations
Your Styles
*
*
Media Type Importance Speci!city Declaration
![Page 7: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/7.jpg)
Browser
User
Author
User Agent Default Styles
User Customizations
Your Styles
*
*
Media Type Importance Speci!city Declaration
![Page 8: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/8.jpg)
Browser
User
Author
User Agent Default Styles
User Customizations
Your Styles
*
*
Media Type Importance Speci!city Declaration
![Page 9: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/9.jpg)
!Important*
Media Type Importance Speci!city Declaration
![Page 10: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/10.jpg)
Browser
User
AuthorUser Agent Default Styles
User !important Customizations
Your !important Styles
Media Type Importance Speci!city Declaration
![Page 11: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/11.jpg)
(...but not too speci!c.)BE Specific
Media Type Importance Speci!city Declaration
![Page 12: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/12.jpg)
Media Type Importance Speci!city 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; }
![Page 13: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/13.jpg)
Media Type Importance Speci!city Declaration
#content article .entry-header h2.entry-title { font: 400 1.5em/1.2 Bebas Neue, sans-serif; }
To override this...
IS Not FUN!
![Page 14: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/14.jpg)
1. Inline Styles
SPECIFICITY ORDER
Media Type Importance Speci!city Declaration
![Page 15: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/15.jpg)
1. Inline Styles2. IDs
SPECIFICITY ORDER
Media Type Importance Speci!city Declaration
![Page 16: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/16.jpg)
1. Inline Styles2. IDs3. Classes and pseudo-classes
SPECIFICITY ORDER
Media Type Importance Speci!city Declaration
![Page 17: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/17.jpg)
1. Inline Styles2. IDs3. Classes and pseudo-classes4. Elements and pseudo-elements
SPECIFICITY ORDER
Media Type Importance Speci!city Declaration
![Page 18: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/18.jpg)
SPECIFICITY ORDER
Media Type Importance Speci!city 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#speci!city
![Page 19: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/19.jpg)
Declaration Order
Media Type Importance Speci!city Declaration
body { color: #bada55; }
.entry-title { color: #d0ab1e }
...
body { color: #affec7; }
![Page 20: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/20.jpg)
#affec7
Media Type Importance Speci!city Declaration
Body
#d0ab1e.entry-title
Outcome
![Page 21: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/21.jpg)
Media Type Importance Speci!city Declaration
body { background: #fff; }
@media (min-width: 760px) { body { background: #bada55; } } @media (min-width: 960px) { body { background: #affec7; } }
![Page 22: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/22.jpg)
Some css values are inherited by the children of an element in the document tree.
Inherence
Media Type Importance Speci!city Declaration
![Page 23: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/23.jpg)
Media Type Importance Speci!city 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; }
![Page 24: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/24.jpg)
cascade + Inherence =
Media Type Importance Speci!city Declaration
(+ Media Queries)
![Page 25: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/25.jpg)
Media Type Importance Speci!city 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; */ }
![Page 26: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/26.jpg)
Flow With The CascadeIt’s a Beautiful Thing
![Page 27: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/27.jpg)
MOBILE FIRSTink
![Page 28: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/28.jpg)
MOBILE FIRSTContentFIRSTCause what exactly is “mobile” anyways?
ink
![Page 29: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/29.jpg)
Start with the LeastCommon Denominator
![Page 30: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/30.jpg)
Design from the bottom up; from the content out.
![Page 31: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/31.jpg)
DON’T display: none;Don't limit experiences.
![Page 32: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/32.jpg)
Accessible, Lean, Clean, Lightweight
![Page 33: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/33.jpg)
Speed is !importantPerformance is Key
(a fundamental component of user experience)
![Page 34: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/34.jpg)
Today’s average website takes 7s to load
![Page 35: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/35.jpg)
Today’s average website takes 7s to load
More than a second will cause the user to interrupt their "ow of thought, creating a poor experience.
![Page 36: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/36.jpg)
Optimize
![Page 37: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/37.jpg)
CSS selectorsUse efficient
![Page 38: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/38.jpg)
PREPROCESSORS ARE YOUR FRIEND
SASS, Stylus, LESS
![Page 39: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/39.jpg)
BE MODULARink in terms of reusable parts to keep
things simple and consistent.
![Page 40: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/40.jpg)
grunt-contrib-concathttps://github.com/gruntjs/grunt-contrib-concat
Combine multiple #les into one output #le
![Page 41: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/41.jpg)
grunt-contrib-cssminhttps://github.com/gruntjs/grunt-contrib-cssmin
Minify CSS #les
![Page 42: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/42.jpg)
TEST, TEST, TEST
![Page 43: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/43.jpg)
TEST
![Page 44: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/44.jpg)
Don’t just test Browsers, and Devices,But loading on different connectivity
De!nitely check out Network Link Conditioner for OS X
![Page 45: A Better Theme Process: Learning the Cascade](https://reader035.vdocuments.mx/reader035/viewer/2022081403/5562dfdad8b42aac778b53ca/html5/thumbnails/45.jpg)
Q&Aanks!