CSS Application Architecture

Slide 1

Slide 1 text

CSS Application Architecture @necolas

Slide 2

Slide 2 text

What’s the difference between “Architecture”, “Framework”, and “Toolkit”?

Slide 3

Slide 3 text

Architecture… a plan about how to structure an application.

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Framework… an implementation of an architecture that someone can use as the basis for a working application.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Toolkit / Library… a collection of pre-built patterns that can be assembled to create an application.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Making architectural decisions

Slide 10

Slide 10 text

Client / Agency work

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

I don’t need an architecture!

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Long-lived product work

Slide 16

Slide 16 text

No clients to blame :(

Slide 17

Slide 17 text

Find the right problems

Slide 18

Slide 18 text

Clean code! …no

Slide 19

Slide 19 text

“Does he ever think of anything rbut himself?”

Slide 20

Slide 20 text

Dealing with change

Slide 21

Slide 21 text

Reducing helplessness

Slide 22

Slide 22 text

Communicate ways of thinking

Slide 23

Slide 23 text

The freest human is the one who never has to choose

Slide 24

Slide 24 text

1. Single responsibility 2. Extension over modiﬁcation 3. Composition over inheritance 4. Low coupling 5. Encapsulation 6. Documentation

Slide 25

Slide 25 text

Home Sidebar Tweetbox .home .sidebar .tweetbox { ... } .home .footer .listbox { ... } Footer Listbox

Slide 26

Slide 26 text

Home Sidebar Tweetbox .tweetbox { ... } .listbox { ... } Footer Listbox

Slide 27

Slide 27 text

SUIT framework github.com/suitcss/suit

Slide 28

Slide 28 text

Web Component-y .tweet { /* make it look good */ } .avatar { ... } .text { ... } ... ...

...

Slide 29

Slide 29 text

# utilities u-utilityName # components ComponentName ComponentName--modifierName ComponentName-descendantName # js utilities js-hookName

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

HTML example ... ...

...

Slide 32

Slide 32 text

.Tweet { ... } /* Component */ .Tweet.is-favorited { ... } /* State */ ... ...

...

Slide 33

Slide 33 text

.Tweet { ... } /* Component */ .Tweet-text { ... } /* Descendant */ ... ...

...

Slide 34

Slide 34 text

.Avatar { ... } /* Component */ .Avatar--large { ... } /* Modifier */ ... ...

...

Slide 35

Slide 35 text

... {user.name} {user.screenname}

...

Slide 36

Slide 36 text

... {user.name} {user.screenname}

...

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

What about RWD?

Slide 40

Slide 40 text

bostonglobe.com

Slide 41

Slide 41 text

92 separate @media directives 27 different width values 380 480 481 600 620 639 640 700 750 768 788 799 800 809 810 900 930 931 960 980 1024 1050 1100 1200 1210 1220 1400

Slide 42

Slide 42 text

Restraint required

Slide 43

Slide 43 text

@import “component/grid-v1.css”; @import “component/grid-v2.css” (min-width: 20em); @import “component/grid-v3.css” (min-width: 50em);

Slide 44

Slide 44 text

.v1-u-size1of2 { ... } .v2-u-size1of4 { ... } .v3-u-size1of6 { ... }

Slide 45

Slide 45 text

Tooling

Slide 46

Slide 46 text

bower.io

Slide 47

Slide 47 text

# bower.json { "name": "my-app", "dependencies": { "normalize-css": "~2.1.0", "suit-utils": "~0.6.0", "suit-button": "~2.0.0”, "suit-grid": "~0.2.0", ... } }

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

CSS preprocessing

Slide 50

Slide 50 text

Automatic vendor preﬁxes

Slide 51

Slide 51 text

.Button { background: linear-gradient(…); }

Slide 52

Slide 52 text

.Button { background: -webkit-linear-gradient(…); background: linear-gradient(…); }

Slide 53

Slide 53 text

CSS variables

Slide 54

Slide 54 text

:root { var-button-bg: linear-gradient(…); } .Button { background: var(button-bg); }