Tweet
Tweet

Slide 1

Slide 1 text

Help! My Stylesheets are a Mess! Wednesday, May 2, 12

Slide 2

Slide 2 text

Chris Eppstein Architect: Caring.com Creator: Compass Stylesheet Authoring Framework Core Developer: Sass Stylesheet Language @chriseppstein Wednesday, May 2, 12

Slide 3

Slide 3 text

#cleanstyles Wednesday, May 2, 12 If you tweet about this talk, please use the hashtag

Slide 4

Slide 4 text

Assumptions ‣Good at CSS ‣Basic knowledge of Sass ‣Large Website/Application ‣Team-based Development Wednesday, May 2, 12

Slide 5

Slide 5 text

Do your stylesheets feel like this? Incomprehensible wall of tangled styles is incomprehensible Wednesday, May 2, 12

Slide 6

Slide 6 text

You Have One Giant CSS File Wednesday, May 2, 12 organized by comments

Slide 7

Slide 7 text

You Have Thousands of Selectors Wednesday, May 2, 12 with no coherent strategy

Slide 8

Slide 8 text

You Have Styles in the Way Wednesday, May 2, 12 styles from the cascade and document inheritance that are hurting instead of helping

Slide 9

Slide 9 text

You Have Unpredictable Bugs Wednesday, May 2, 12

Slide 10

Slide 10 text

You Have Property Soup Wednesday, May 2, 12

Slide 11

Slide 11 text

You Have Accidentally the Stylesheets Wednesday, May 2, 12 Ended up here because you didn’t have a plan. Because what you need

Slide 12

Slide 12 text

You Need STRUCTURE Wednesday, May 2, 12

Slide 13

Slide 13 text

You Need PATTERNS Wednesday, May 2, 12

Slide 14

Slide 14 text

You Need RULES Wednesday, May 2, 12

Slide 15

Slide 15 text

You Need CLARITY OF INTENT Wednesday, May 2, 12

Slide 16

Slide 16 text

CSS FRAMEWORKS will not solve your problem Wednesday, May 2, 12

Slide 17

Slide 17 text

PRE PROCESSORS will not solve your problem Wednesday, May 2, 12

Slide 18

Slide 18 text

The Problem is Wednesday, May 2, 12

Slide 19

Slide 19 text

The Problem is YOU Wednesday, May 2, 12

Slide 20

Slide 20 text

LOOKING GOOD is not done Wednesday, May 2, 12

Slide 21

Slide 21 text

LOOKING GOOD is not even half done Wednesday, May 2, 12

Slide 22

Slide 22 text

NAME You have to Wednesday, May 2, 12

Slide 23

Slide 23 text

ORGANIZE You have to Wednesday, May 2, 12

Slide 24

Slide 24 text

DISSECT You have to Wednesday, May 2, 12

Slide 25

Slide 25 text

DOCUMENT You have to Wednesday, May 2, 12

Slide 26

Slide 26 text

WORK HARD You have to Wednesday, May 2, 12

Slide 27

Slide 27 text

REFACTOR CONSTANTLY You have to Wednesday, May 2, 12

Slide 28

Slide 28 text

Or Else Your stylesheets will sap your soul of the will to live Wednesday, May 2, 12

Slide 29

Slide 29 text

You need better tools. Wednesday, May 2, 12 Better tools that provide insulation between what you write and what you serve. So that you are free to organize without constraints.

Slide 30

Slide 30 text

Property Soup Le average sass stylesheet. Wednesday, May 2, 12 This is decent sass, could be a lot worse, would be a lot worse in css. but it can be so much better.

Slide 31

Slide 31 text

Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 32

Slide 32 text

Constructing an Object Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 33

Slide 33 text

Constructing an Object Wednesday, May 2, 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 Wednesday, May 2, 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 Wednesday, May 2, 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 Wednesday, May 2, 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 Wednesday, May 2, 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 Unstyled Background Container Typography Foreground Margin/Padding Wednesday, May 2, 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 .calming .shadow-box .reading-text .green-bg-type .vertically-padded Wednesday, May 2, 12 From each category you can usually only pick 1 class to apply to the same element.

Slide 40

Slide 40 text

Property Soup Le average sass stylesheet. Wednesday, May 2, 12 How should we organize our style properties? Alphabetize them! We can do better than this. We will organize our properties by style concern.

Slide 41

Slide 41 text

Property Soup Le average sass stylesheet. Alphabetized Wednesday, May 2, 12 How should we organize our style properties? Alphabetize them! We can do better than this. We will organize our properties by style concern.

Slide 42

Slide 42 text

Property Soup Le average sass stylesheet. Alphabetized Wednesday, May 2, 12 How should we organize our style properties? Alphabetize them! We can do better than this. We will organize our properties by style concern.

Slide 43

Slide 43 text

Typography The non-color aspects of text. Wednesday, May 2, 12 Note how the typography and foreground are mixed up?

Slide 44

Slide 44 text

Typography Typographic properties: font-xxx, line- height, bullets, text-xxx, margin Wednesday, May 2, 12 Explain the placeholder selector

Slide 45

Slide 45 text

Container Not all paddings are from the same concern. Wednesday, May 2, 12

Slide 46

Slide 46 text

Container border, box shadow, padding Wednesday, May 2, 12

Slide 47

Slide 47 text

Background Background - this one is easy :) Wednesday, May 2, 12

Slide 48

Slide 48 text

Foreground border-color, color, shadow-color Wednesday, May 2, 12 you can’t declare text shadow color explicitly, so we have to put all text shadows in the foreground, otherwise the shadow details would be in the typography.

Slide 49

Slide 49 text

Spacers margin & padding on non-typographic elements Wednesday, May 2, 12

Slide 50

Slide 50 text

An Object Description In Sass, we describe objects using words and high-level concepts, not style primitives. Wednesday, May 2, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.

Slide 51

Slide 51 text

An Object Description In Sass, we describe objects using words and high-level concepts, not style primitives. Wednesday, May 2, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.

Slide 52

Slide 52 text

An Object Description Our object description is longer now. Wednesday, May 2, 12

Slide 53

Slide 53 text

An Object Description Our object description is longer now. Not Re-Usable Re-Usable Wednesday, May 2, 12

Slide 54

Slide 54 text

A Sad Reality If you use @extend like this, your stylesheets will be huge. Wednesday, May 2, 12 So unless you need the flexibility that semantic markup brings for shared content, etc

Slide 55

Slide 55 text

A Sad Reality Classitis provides a better user experience. Wednesday, May 2, 12

Slide 56

Slide 56 text

A Sad Reality Classitis provides a better user experience. Wednesday, May 2, 12

Slide 57

Slide 57 text

We Need Browser Support for @extend Wednesday, May 2, 12 Do this right now. I’ll wait. Now back to the show.

Slide 58

Slide 58 text

More Concepts More Organization But everything has a place. Wednesday, May 2, 12

Slide 59

Slide 59 text

Library: ‣No output. ‣Mostly presentational in nature. Foundation: ‣Core, Shared Styles. ‣Maps Presentation to Domain. Application: ‣Features. ‣One-off Pages. ‣Experimental styles. ‣Server traffic patterns Wednesday, May 2, 12

Slide 60

Slide 60 text

Library: ‣No output. ‣Mostly presentational in nature. Foundation: ‣Core, Shared Styles. ‣Maps Presentation to Domain. Application: ‣Features. ‣One-off Pages. ‣Experimental styles. ‣Server traffic patterns Wednesday, May 2, 12

Slide 61

Slide 61 text

Library: ‣No output. ‣Mostly presentational in nature. Foundation: ‣Core, Shared Styles. ‣Maps Presentation to Domain. Application: ‣Features. ‣One-off Pages. ‣Experimental styles. ‣Server traffic patterns Wednesday, May 2, 12

Slide 62

Slide 62 text

Progression of a Design Wednesday, May 2, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.

Slide 63

Slide 63 text

Progression of a Design Prototype Variations Multiple Uses Domain Concepts Presentational Concepts Concept App Styles Foundation Classes Mixin Library Wednesday, May 2, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.

Slide 64

Slide 64 text

Style Concern: Structure • Floated Grid - Provides the structure of a page. CSS3 will bring alternate layout methods. • Page layouts - Defines how primary elements adhere to the grid and respond. Blog Post Wednesday, May 2, 12

Slide 65

Slide 65 text

Wednesday, May 2, 12

Slide 66

Slide 66 text

Wednesday, May 2, 12

Slide 67

Slide 67 text

Wednesday, May 2, 12

Slide 68

Slide 68 text

Wednesday, May 2, 12

Slide 69

Slide 69 text

Wednesday, May 2, 12

Slide 70

Slide 70 text

Wednesday, May 2, 12

Slide 71

Slide 71 text

Wednesday, May 2, 12

Slide 72

Slide 72 text

Wednesday, May 2, 12

Slide 73

Slide 73 text

Wednesday, May 2, 12

Slide 74

Slide 74 text

Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12

Slide 75

Slide 75 text

Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12

Slide 76

Slide 76 text

Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12

Slide 77

Slide 77 text

Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12

Slide 78

Slide 78 text

Style Concern: Structure • Layout - Non-grid based structural patterns. Wednesday, May 2, 12

Slide 79

Slide 79 text

Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.

Slide 80

Slide 80 text

Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Opt-in To Typography Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.

Slide 81

Slide 81 text

Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.

Slide 82

Slide 82 text

Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Wednesday, May 2, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance can be annoying.

Slide 83

Slide 83 text

Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12

Slide 84

Slide 84 text

Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12

Slide 85

Slide 85 text

Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12

Slide 86

Slide 86 text

Style Concern: Container • Define a space using boxes and separators. • Accommodate whatever content you put in them. Wednesday, May 2, 12

Slide 87

Slide 87 text

Style Concern: Spacers • Add space using dimensions from the vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 2, 12

Slide 88

Slide 88 text

Style Concern: Spacers • Add space using dimensions from the vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 2, 12

Slide 89

Slide 89 text

Style Concern: Spacers • Add space using dimensions from the vertical-rhythm and grid • Margins • Paddings • Un-paddings Wednesday, May 2, 12

Slide 90

Slide 90 text

Style Concern: Background • Gives an area background color, pattern, or imagery. • Combine with any container. Wednesday, May 2, 12

Slide 91

Slide 91 text

Style Concern: Background • Gives an area background color, pattern, or imagery. • Combine with any container. Wednesday, May 2, 12

Slide 92

Slide 92 text

Style Concern: Background • Gives an area background color, pattern, or imagery. • Combine with any container. Wednesday, May 2, 12

Slide 93

Slide 93 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 94

Slide 94 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 95

Slide 95 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 96

Slide 96 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 97

Slide 97 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 98

Slide 98 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 99

Slide 99 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 100

Slide 100 text

Style Concern: Foreground • Gives color to type and borders • Often linked to a background Wednesday, May 2, 12 It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1 foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but it forces consistency. It’s a trade-off you can decide to make or not.

Slide 101

Slide 101 text

Style Concern: Lists/Tables/Forms • These are unique beasts • Might be part of a typography • Use them semantically • Class on the main element Wednesday, May 2, 12

Slide 102

Slide 102 text

Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12

Slide 103

Slide 103 text

Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12

Slide 104

Slide 104 text

Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12

Slide 105

Slide 105 text

Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Wednesday, May 2, 12

Slide 106

Slide 106 text

Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12

Slide 107

Slide 107 text

Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12

Slide 108

Slide 108 text

Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12

Slide 109

Slide 109 text

Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12

Slide 110

Slide 110 text

Style Concern: Theming • Color Palette • Semantic Color Relationships • Default Variables • Compile Stylesheet with a different configuration Wednesday, May 2, 12

Slide 111

Slide 111 text

Naming is Hard Wednesday, May 2, 12

Slide 112

Slide 112 text

Naming is a Collaboration Designers must pick or approve the name. Unfortunately, designers are not often good at naming things. Wednesday, May 2, 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 113

Slide 113 text

Naming Docent Developers, your job is to help them develop a shared design vocabulary. Wednesday, May 2, 12 If you are a developer and a designer, you now have an excuse for talking to yourself.

Slide 114

Slide 114 text

The Name Game Find a name that describes the intent of a design element, not the appearance. Wednesday, May 2, 12

Slide 115

Slide 115 text

The Name Game A too-specific name is better than a too-generic name. Wednesday, May 2, 12

Slide 116

Slide 116 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 117

Slide 117 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 118

Slide 118 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 119

Slide 119 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 120

Slide 120 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 121

Slide 121 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 122

Slide 122 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 123

Slide 123 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 124

Slide 124 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 125

Slide 125 text

The Name Game Wednesday, May 2, 12 THESAURUS!!!

Slide 126

Slide 126 text

Losing the Name Game Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 127

Slide 127 text

Losing the Name Game Give up: Pick two names Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 128

Slide 128 text

Losing the Name Game Give up: Pick two names Consistency: Change the design Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 129

Slide 129 text

Losing the Name Game Give up: Pick two names Consistency: Change the design Wait: Don’t name it Wednesday, May 2, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 130

Slide 130 text

The Designer Wins Wednesday, May 2, 12 Don’t force a design change just because a name doesn’t match. Intuition is a tricky thing, if you trust your designer, trust their gut feeling. If you don’t trust your designer... :(

Slide 131

Slide 131 text

Classes or IDs? Use IDs for unique page elements. Specificity is good when styling something specific. Wednesday, May 2, 12 not always possible to find a document order. specificity is BETTER than !important. !important is a nuclear option.

Slide 132

Slide 132 text

Specificity Wars Time to Refactor! Wednesday, May 2, 12 Fight the specificity wars, by refactoring; not by rejecting specificity. Document order is not enough. Keep the same order of specificity at the same level of abstraction.

Slide 133

Slide 133 text

Mixin Library The presentational concepts upon which the foundation classes are built. Wednesday, May 2, 12

Slide 134

Slide 134 text

Structure of a Library Module 1.Dependency Imports 2.Variables, almost always defaulted. 3.Functions 4.Mixins 5.Placeholder selectors 6.Style Selectors Wednesday, May 2, 12 Placeholders: only import once or use the mixin hack if your module has these Selectors: Usually don't mix with Functions/mixins/placeholders

Slide 135

Slide 135 text

Read Compass Compass is a Mixin Library Wednesday, May 2, 12

Slide 136

Slide 136 text

Breaking the Rules ‣Experiment with new designs ‣Accommodate non-conforming design. ‣Build what you need today ‣Meet your deadlines ‣Diligently factor out what is common Wednesday, May 2, 12

Slide 137

Slide 137 text

Documentation ‣It's better to show than to tell. ‣Make a living styleguide for documentation and prototyping. ‣This is your design catalog. ‣Teach the design, don't just exemplify it. Wednesday, May 2, 12

Slide 138

Slide 138 text

Downsides ‣Learning curve ‣Harder to debug ‣Classitis ‣A lot of work Wednesday, May 2, 12 1-2 days of training to become capable. 3-4 weeks to be competent. It will take > 1 month for an experienced team to build a comprehensive styleguide.

Slide 139

Slide 139 text

Benefits Everything has a place Wednesday, May 2, 12

Slide 140

Slide 140 text

Benefits Filesize Wednesday, May 2, 12 Better factorization => less duplication

Slide 141

Slide 141 text

Benefits Efficient communication Wednesday, May 2, 12 More efficient team thru better communication thanks to new vocabulary. completely Describing a page design can be done in ~5 minutes.

Slide 142

Slide 142 text

Benefits Low Coupling Wednesday, May 2, 12 a clean separation in responsibilities, means changes breaks things less often in unexpected ways

Slide 143

Slide 143 text

Benefits Built to last Wednesday, May 2, 12 These styles will be used for > 2 years. These styles will be used by a team. For the love of god, don't do this for your blog or a marketing/promotional site.

Slide 144

Slide 144 text

Thank you! Compass is Charityware. Please donate on our behalf to the United Mitochondrial Disease Foundation http://umdf.org/compass Wednesday, May 2, 12