A Better Theme Process: Learning the Cascade

Learning the CascadeA Better Theme Process

Christopher Cochran@tweetsfromchris

CSSCascading Style Sheet

CascadingOrder

Media Type Importance Speci!city Declaration

allbrailleembossedhandheldprintprojection

@media rules


screenspeechttytv

Browser

User

Author

User Agent Default Styles

User Customizations

Your Styles

*

*


!Important*


Browser

User

AuthorUser Agent Default Styles

User !important Customizations

Your !important Styles


(...but not too speci!c.)BE Specific



/* 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; }


#content article .entry-header h2.entry-title { font: 400 1.5em/1.2 Bebas Neue, sans-serif; }

To override this...

IS Not FUN!

1. Inline Styles

SPECIFICITY ORDER


1. Inline Styles2. IDs

SPECIFICITY ORDER


1. Inline Styles2. IDs3. Classes and pseudo-classes

SPECIFICITY ORDER


1. Inline Styles2. IDs3. Classes and pseudo-classes4. Elements and pseudo-elements

SPECIFICITY ORDER


SPECIFICITY ORDER


* {} /* 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

http://www.w3.org/TR/CSS2/cascade.html#specificity

http://www.w3.org/TR/CSS2/cascade.html#specificity

Declaration Order


body { color: #bada55; }

.entry-title { color: #d0ab1e }

...

body { color: #affec7; }

#affec7


Body

#d0ab1e.entry-title

Outcome


body { background: #fff; }

@media (min-width: 760px) { body { background: #bada55; } } @media (min-width: 960px) { body { background: #affec7; } }

Some css values are inherited by the children of an element in the document tree.

Inherence



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; }

cascade + Inherence =


(+ Media Queries)


/* 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; */ }

Flow With The CascadeIt’s a Beautiful Thing

MOBILE FIRSTink

MOBILE FIRSTContentFIRSTCause what exactly is “mobile” anyways?

ink

Start with the LeastCommon Denominator

Design from the bottom up; from the content out.

DON’T display: none;Don't limit experiences.

Accessible, Lean, Clean, Lightweight

Speed is !importantPerformance is Key

(a fundamental component of user experience)

Today’s average website takes 7s to load

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.

Optimize

CSS selectorsUse efficient

PREPROCESSORS ARE YOUR FRIEND

SASS, Stylus, LESS

BE MODULARink in terms of reusable parts to keep

things simple and consistent.

grunt-contrib-concathttps://github.com/gruntjs/grunt-contrib-concat

Combine multiple #les into one output #le

https://github.com/gruntjs/grunt-contrib-concat

https://github.com/gruntjs/grunt-contrib-concat

grunt-contrib-cssminhttps://github.com/gruntjs/grunt-contrib-cssmin

Minify CSS #les

https://github.com/gruntjs/grunt-contrib-cssmin

https://github.com/gruntjs/grunt-contrib-cssmin

TEST, TEST, TEST

Don’t just test Browsers, and Devices,But loading on different connectivity

De!nitely check out Network Link Conditioner for OS X

Q&Aanks!

A Better Theme Process: Learning the Cascade

Design

Transcript of A Better Theme Process: Learning the Cascade