Tweet
Tweet

Slide 1

Slide 1 text

CSS Wranglin’ Friday, March 1, 13

Slide 2

Slide 2 text

by Joe Ellis @notjoeellis [email protected] Developer at Audiosocket Friday, March 1, 13

Slide 3

Slide 3 text

Disclaimer Friday, March 1, 13

Slide 4

Slide 4 text

This is for medium to large applications Rules may not make sense for small sites. Friday, March 1, 13

Slide 5

Slide 5 text

YMMV Friday, March 1, 13

Slide 6

Slide 6 text

Use a CSS precompiler Friday, March 1, 13

Slide 7

Slide 7 text

File Structure Friday, March 1, 13

Slide 8

Slide 8 text

Friday, March 1, 13

Slide 9

Slide 9 text

General Goals Friday, March 1, 13

Slide 10

Slide 10 text

• Predictable • Reusable • Maintainable • Scalable Good CSS is: How to do this? Friday, March 1, 13

Slide 11

Slide 11 text

Avoid overly specific selectors and parent selectors Friday, March 1, 13

Slide 12

Slide 12 text

BAD Friday, March 1, 13

Slide 13

Slide 13 text

GOOD Friday, March 1, 13

Slide 14

Slide 14 text

Avoid #IDS Friday, March 1, 13

Slide 15

Slide 15 text

Avoid overly generic class names Friday, March 1, 13

Slide 16

Slide 16 text

BAD Friday, March 1, 13

Slide 17

Slide 17 text

GOOD Friday, March 1, 13

Slide 18

Slide 18 text

Avoid having classes do too much. Abstract where possible. Friday, March 1, 13

Slide 19

Slide 19 text

BAD Friday, March 1, 13

Slide 20

Slide 20 text

NOT BAD Friday, March 1, 13

Slide 21

Slide 21 text

BEST Friday, March 1, 13

Slide 22

Slide 22 text

Separate CSS styles from JS hooks Friday, March 1, 13

Slide 23

Slide 23 text

BAD Friday, March 1, 13

Slide 24

Slide 24 text

GOOD Friday, March 1, 13

Slide 25

Slide 25 text

Got questions /tips? Friday, March 1, 13

Slide 26

Slide 26 text

FIN Friday, March 1, 13