CSS Isn't Sccary - Speaker Deck

Slide 1

Slide 1 text

CSS ISN'T SCARY: HOW TO STOP WORRYING AND LOVE FRONT END with Stephanie Slattery CSS Isn't Scary | @sublimemarch

Slide 2

Slide 2 text

#CODERCONFERENCE @SUBLIMEMARCH CSS Isn't Scary | @sublimemarch

Slide 3

Slide 3 text

Raise your hand if... CSS Isn't Scary | @sublimemarch

Slide 4

Slide 4 text

1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch

Slide 5

Slide 5 text

1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch

Slide 6

Slide 6 text

CSS Isn't Scary | @sublimemarch

Slide 7

Slide 7 text

CSS Isn't Scary | @sublimemarch

Slide 8

Slide 8 text

CSS Isn't Scary | @sublimemarch

Slide 9

Slide 9 text

CSS Isn't Scary | @sublimemarch

Slide 10

Slide 10 text

CSS Isn't Scary | @sublimemarch

Slide 11

Slide 11 text

CSS IS DECLARATIVE CSS Isn't Scary | @sublimemarch

Slide 12

Slide 12 text

CSS Isn't Scary | @sublimemarch

Slide 13

Slide 13 text

CSS Isn't Scary | @sublimemarch

Slide 14

Slide 14 text

CSS IS awful! CSS Isn't Scary | @sublimemarch

Slide 15

Slide 15 text

CSS IS awesome! CSS Isn't Scary | @sublimemarch

Slide 16

Slide 16 text

1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch

Slide 17

Slide 17 text

THE SEPARATION OF CONTROLS PRINCIPLE CSS Isn't Scary | @sublimemarch

Slide 18

Slide 18 text

CSS IS FLEXIBLE CSS Isn't Scary | @sublimemarch

Slide 19

Slide 19 text

CSS IS MADE OF SIMPLE THINGS CSS Isn't Scary | @sublimemarch

Slide 20

Slide 20 text

.selector { name: value; } CSS Isn't Scary | @sublimemarch

Slide 21

Slide 21 text

CSS IS EASY TO GENERATE CSS Isn't Scary | @sublimemarch

Slide 22

Slide 22 text

CSS STANDS ALONE CSS Isn't Scary | @sublimemarch

Slide 23

Slide 23 text

Just look at this! Or this! CSS Isn't Scary | @sublimemarch

Slide 24

Slide 24 text

CSS IS OPEN SOURCE CSS Isn't Scary | @sublimemarch

Slide 25

Slide 25 text

1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch

Slide 26

Slide 26 text

CSS IS JUST ANOTHER PROGRAMMING LANGUAGE CSS Isn't Scary | @sublimemarch

Slide 27

Slide 27 text

UNDERSTAND SPECIFICITY 0. Inline styles 1. IDs 2. Classes, attributes, and pseudo-classes 3. Elements and pseudo-elements CSS Isn't Scary | @sublimemarch

Slide 28

Slide 28 text

DON'T GUESS AND CHECK FOR SPECIFICITY CSS Isn't Scary | @sublimemarch

Slide 29

Slide 29 text

http://specificity.keegan.st/ CSS Isn't Scary | @sublimemarch

Slide 30

Slide 30 text

DON'T OVER-SPECIFY #home #hero #claim .logo h2 { display: inline-block; } CSS Isn't Scary | @sublimemarch

Slide 31

Slide 31 text

DON'T PUT HTML COMPONENTS IN SELECTORS a { text-decoration: none; } CSS Isn't Scary | @sublimemarch

Slide 32

Slide 32 text

NO !IMPORTANT FLAGS .pink-text { color: pink !important; } CSS Isn't Scary | @sublimemarch

Slide 33

Slide 33 text

AND ABSOLUTELY NO INLINE STYLES

Hello!

CSS Isn't Scary | @sublimemarch

Slide 34

Slide 34 text

USE A SINGLE CLASS AS YOUR SELECTOR .hero-text-link { font-size: 18px; } INSTEAD OF SOMETHING MORE COMPLEX .hero p a { font-size: 18px; } CSS Isn't Scary | @sublimemarch

Slide 35

Slide 35 text

KEEP IT DRY CSS Isn't Scary | @sublimemarch

Slide 36

Slide 36 text

Hello

.fun-title { font-family: "Comic Sans", sans-serif; } .pink-title { font-family: "Comic Sans", sans-serif; color: pink; } CSS Isn't Scary | @sublimemarch

Slide 37

Slide 37 text

INSTEAD

Hello

.fun-title, .pink-title { font-family: "Comic Sans", sans-serif; } .pink-title { color: pink; } CSS Isn't Scary | @sublimemarch

Slide 38

Slide 38 text

OR EVEN BETTER

Hello

.title { font-family: "Comic Sans", sans-serif; } .pink-title { color: pink; } CSS Isn't Scary | @sublimemarch

Slide 39

Slide 39 text

CSS TRANSPILERS MAKE THIS EVEN EASIER CSS Isn't Scary | @sublimemarch

Slide 40

Slide 40 text

Hello!

.title { font-family: "Comic Sans", sans-serif; } .pink-title { @extend .title; color: pink; } CSS Isn't Scary | @sublimemarch

Slide 41

Slide 41 text

ORGANIZE YOUR CSS CSS Isn't Scary | @sublimemarch

Slide 42

Slide 42 text

HACKS.CSS CSS Isn't Scary | @sublimemarch

Slide 43

Slide 43 text

PUT IT IN A HACKS.CSS FILE IF YOU'RE ▸ using magic numbers ▸ writing overly specific selectors ▸ using !important flags ▸ undoing styles that are elsewhere in the code CSS Isn't Scary | @sublimemarch

Slide 44

Slide 44 text

UNDERSTAND BROWSER COMPATIBILITY CSS Isn't Scary | @sublimemarch

Slide 45

Slide 45 text

https://caniuse.com/ CSS Isn't Scary | @sublimemarch

Slide 46

Slide 46 text

AND SO MUCH MORE! - learn the box model - use flexbox - pick a preprocessor - implement a naming methodology like BEM or OOCSS - try visual diffs to test your code - use a linter - look at dev tools - use a CSS reset CSS Isn't Scary | @sublimemarch