The Four Noble Truths (of Stylesheets)

Slide 1

Slide 1 text

The Four Noble Truths (of Stylesheets) Saturday, June 30, 12

Slide 2

Slide 2 text

You are suffering. (we were too) http://inguen.blogspot.com/2009_02_01_archive.html Saturday, June 30, 12

Slide 3

Slide 3 text

STYLESHEETS are the source of your suffering http://wikibon.org/blog/wp-content/uploads/2011/10/5.„eg Saturday, June 30, 12 It is the nature of CSS to devolve into madness. Duplicated styles, code spaghetti, inconsistent UI, lots of decision-making and no clear path.

Slide 4

Slide 4 text

You can be free from suffering. http://www.indiegamemag.com/media/lightbulb.jpg Saturday, June 30, 12 You don’t have to live like this.

Slide 5

Slide 5 text

Living style guides & self-discipline will free you from your suffering http://www.tsf.net.au/gallery/var/albums/Tidy-Cabling/46-cluster_back2.„g?m=1294131614 Saturday, June 30, 12

Slide 6

Slide 6 text

Development Speed Re-use Flexibility Repetition Requires Reduces Requires Reduces Saturday, June 30, 12 These tradeoffs are fundamental to software.

Slide 7

Slide 7 text

“Why is it so slow to make new pages that look similar?” Hand coded CSS Saturday, June 30, 12

Slide 8

Slide 8 text

I need to reuse my classnames. Saturday, June 30, 12

Slide 9

Slide 9 text

and save time Saturday, June 30, 12

Slide 10

Slide 10 text

There we go Saturday, June 30, 12

Slide 11

Slide 11 text

I’m so fast now. CSS FRAMEWORKS Saturday, June 30, 12

Slide 12

Slide 12 text

“Change this bit here, will ya?” Saturday, June 30, 12

Slide 13

Slide 13 text

But if I change that, it will affect these other things. Saturday, June 30, 12

Slide 14

Slide 14 text

“Why? They’re not related.” Saturday, June 30, 12

Slide 15

Slide 15 text

I need to NOT reuse my classnames. Sometimes. Saturday, June 30, 12

Slide 16

Slide 16 text

I’m so ﬂexible now. Scoped Sass Styles & Content Semantics Saturday, June 30, 12

Slide 17

Slide 17 text

“Why is it so hard to roll out this change across the site?” Saturday, June 30, 12 It’s faster than it was,

Slide 18

Slide 18 text

I didn’t know those things were related. Saturday, June 30, 12

Slide 19

Slide 19 text

“Of course they are!” Saturday, June 30, 12

Slide 20

Slide 20 text

Make design-oriented concepts that can vary in appearance. Saturday, June 30, 12

Slide 21

Slide 21 text

Application Concept Framework Let’s work on this together. Saturday, June 30, 12

Slide 22

Slide 22 text

“Change how this concept looks?” “Use this concept instead.” Saturday, June 30, 12

Slide 23

Slide 23 text

No problem. Saturday, June 30, 12

Slide 24

Slide 24 text

“Perfect!” Saturday, June 30, 12

Slide 25

Slide 25 text

Good naming of appropriate concepts is the key to maintainable software. Saturday, June 30, 12 This is not just a stylesheet concept. This is a fundamental truth of software development.

Slide 26

Slide 26 text

How do I know if a concept is appropriate? Saturday, June 30, 12 a concept is appropriate if is independent of other concepts or when its relationship to other concepts is unambiguous. a concept is appropriate if it lives in the application domain. a concept is appropriate if it supports the creation of appropriate concepts.

Slide 27

Slide 27 text

What makes a good name? Saturday, June 30, 12 A good name is short. A good name conveys understanding about a concept. A good name is omits little knowledge about its concept.

Slide 28

Slide 28 text

Naming a concept changes it. Saturday, June 30, 12 Once you name a concept you change the concept into whatever concept that name invokes in another person. Any concept worth creating is a concept worth naming well. Take the time to name it right, or it will be misunderstood and misused. This is the source of most software defects. This is hard for designers because they speak a visual language. they can concisely convey concepts visually for which there is no concise terminology. It’s ok to make up words.

Slide 29

Slide 29 text

Accept your Constraints http://candidkerry.ﬁles.wordpress.com/2011/09/bound-with-chains-of-the-spirit-and-of-men11.jpg Saturday, June 30, 12 We work with browsers and we are beholden to how they work. You cannot ﬁght this. You cannot escape it. Accept it.

Slide 30

Slide 30 text

Fundamentals • Reset • Additive-only • Page Layout • Containers • Typography • Background • Foreground • Spacers • Interaction States • Medias • Height • Differences OK Saturday, June 30, 12 We must embrace these fundamentals. Our concepts cannot ﬁght them or they are not appropriate to our application.

Slide 31

Slide 31 text

Saturday, June 30, 12 Eric Meyer’s Reset. TURN OFF ALL THE STYLES.

Slide 32

Slide 32 text

Additive by Nature Styles Inherit and Cascade. “Turning off” styles is a code smell. Saturday, June 30, 12

Slide 33

Slide 33 text

Constructing an Object Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 34

Slide 34 text

Constructing an Object Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 35

Slide 35 text

Constructing an Object Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 36

Slide 36 text

Constructing an Object Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 37

Slide 37 text

Constructing an Object Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 38

Slide 38 text

Constructing an Object Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 39

Slide 39 text

Constructing an Object Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 40

Slide 40 text

Constructing an Object Unstyled Background Container Typography Foreground Margin/Padding Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 41

Slide 41 text

Constructing an Object .calming .shadow-box .reading-text .green-bg-type .vertically-padded Saturday, June 30, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 42

Slide 42 text

Style Concern: Layout • Grid - Provides the structure of a page. CSS3 will bring alternate layout methods. • Page layouts - Deﬁnes how primary elements adhere to the grid and respond. Blog Post Saturday, June 30, 12

Slide 43

Slide 43 text

Style Concern: Typography • Deﬁnes how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Saturday, June 30, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance is annoying.

Slide 44

Slide 44 text

Style Concern: Typography • Deﬁnes how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Opt-in To Typography Saturday, June 30, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance is annoying.

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Saturday, June 30, 12

Slide 47

Slide 47 text

Saturday, June 30, 12 In order to have consistent breakpoint behavior, Sass 3.2 has new abilities to deﬁne abstractions around styles using @content.

Slide 48

Slide 48 text

Saturday, June 30, 12

Slide 49

Slide 49 text

Height Is a Scary Word http://edge.ebaumsworld.com/mediaFiles/picture/1918624/81886902.jpg Saturday, June 30, 12 except for positioned content, You almost never want to set the hight of anything that has a variable width or variable content (hint: that’s almost everything)

Slide 50

Slide 50 text

Differences are OK http://www.snvdiversityrt.zoomshare.com/ﬁles/Diversity_Matters_photo_without_wording_.jpg Saturday, June 30, 12 Pixel perfection is a pipe dream. Embrace progressive enhancement. Krys: tell designers this is ok. do you have some tips for how to design with enhancement/ degredation in mind?

Slide 51

Slide 51 text

Designer Saturday, June 30, 12 Naming for Intent Design is not art. Design is science with an artistic ﬂair. Suddenly your designs change, as intent becomes more of a focus than art.

Slide 52

Slide 52 text

Naming is a Collaboration Designers must pick or approve the name. Unfortunately, designers are not often good at naming things. Saturday, June 30, 12 Coders have to name everything they make, but designers don’t. Naming is a skill that must be developed. You have to learn to explain your intuition and instinct.

Slide 53

Slide 53 text

Naming is Hard http://funnyphotosto.com/wp-content/uploads/2012/03/12/screaming.„g Saturday, June 30, 12 Because designers think visually, sometimes a description is actually a paragraph, not just one or two words.

Slide 54

Slide 54 text

Naming Docent Developers, your job is to help designers develop a shared vocabulary. Saturday, June 30, 12 If you are a developer and a designer, you now have an excuse for talking to yourself.