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

Media Type Importance Speci!city Declaration

screenspeechttytv

Browser

User

Author

User Agent Default Styles

User Customizations

Your Styles

*

*

Media Type Importance Speci!city Declaration

Browser

User

Author

User Agent Default Styles

User Customizations

Your Styles

*

*

Media Type Importance Speci!city Declaration

Browser

User

Author

User Agent Default Styles

User Customizations

Your Styles

*

*

Media Type Importance Speci!city Declaration

Browser

User

Author

User Agent Default Styles

User Customizations

Your Styles

*

*

Media Type Importance Speci!city Declaration

!Important*

Media Type Importance Speci!city Declaration

Browser

User

AuthorUser Agent Default Styles

User !important Customizations

Your !important Styles

Media Type Importance Speci!city Declaration

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

Media Type Importance Speci!city Declaration

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

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!

1. Inline Styles

SPECIFICITY ORDER

Media Type Importance Speci!city Declaration

1. Inline Styles2. IDs

SPECIFICITY ORDER

Media Type Importance Speci!city Declaration

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

SPECIFICITY ORDER

Media Type Importance Speci!city Declaration

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

SPECIFICITY ORDER

Media Type Importance Speci!city Declaration

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

Declaration Order

Media Type Importance Speci!city Declaration

body { color: #bada55; }

.entry-title { color: #d0ab1e }

...

body { color: #affec7; }

#affec7

Media Type Importance Speci!city Declaration

Body

#d0ab1e.entry-title

Outcome

Media Type Importance Speci!city Declaration

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

Media Type Importance Speci!city Declaration

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

cascade + Inherence =

Media Type Importance Speci!city Declaration

(+ Media Queries)

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

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

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

Minify CSS #les

TEST, 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!