Teaching Our CSS To Play Nice

Slide 1

Slide 1 text

TEACHING OUR CSS TO PLAY NICE Jen Myers • @antiheroine • Chicago Web Conf • October 2012

Slide 2

Slide 2 text

As our teams and projects grow, so does our CSS.

Slide 3

Slide 3 text

Multiple ﬁles, frameworks, bootstraps, preprocessors, syntax preferences, various team members, oh my.

Slide 4

Slide 4 text

We start with cute little stylesheets and end up with surly, teenaged CSS that refuses to do what it’s told.

Slide 5

Slide 5 text

BABY STEPS Beginning a new project

Slide 6

Slide 6 text

Think about: project scope, ﬁle organization and tools.

Slide 7

Slide 7 text

Do we use frameworks?

Slide 8

Slide 8 text

If you choose a framework, invest in a little customization.

Slide 9

Slide 9 text

What is a preprocessor?

Slide 10

Slide 10 text

Sass vs LESS

Slide 11

Slide 11 text

GROWING UP RIGHT Best micro practices

Slide 12

Slide 12 text

Write the CSS you would like to edit.

Slide 13

Slide 13 text

Property order

Slide 14

Slide 14 text

45% grouped by type 39% randomly 14% alphabetical 2% by line length http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

Slide 15

Slide 15 text

http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

Slide 16

Slide 16 text

Section organization

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Single-line vs. multi-line

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Reusable CSS

Slide 21

Slide 21 text

Learn from programmers: don’t repeat yourself.

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

GOING OUT INTO THE WORLD Sharing your styles

Slide 24

Slide 24 text

Don’t forget plain, old-fashioned communication.

Slide 25

Slide 25 text

Find your own balance.

Slide 26

Slide 26 text

Jen Myers Designer Relevance [email protected]