The CSS Mindset

Slide 1

Slide 2

bit.ly/css-mindset Max Böck @mxbck Front-End Lead, Simpleloop Vienna, Austria

Slide 3

Slide 4

Slide 5

“Just shows the ridiculous fragility of CSS.”

Slide 6

” CSS is such a mess zero predictability. we really need a better system.”

Slide 7

” WTF. this is why I hate frontend dev. 🤦”

Slide 8

Slide 9

Why is CSS such a frustrating language for many developers?

Slide 10

Robin Rendle, CSS-Tricks Newsletter, Issue #151

Slide 11

Robin Rendle, CSS-Tricks Newsletter, Issue #151

Slide 12

Robin Rendle, CSS-Tricks Newsletter, Issue #151

Slide 13

THE CSS MINDSET

Slide 14

Aha-Moment #1 Everything is a Box.

Slide 15

Heydon Pickering / Andy Bell, every-layout.dev

Slide 16

{ outline: 2px solid hotpink; }

Slide 17

Firefox Developer Tools (v69)

Slide 18

Aha-Moment #2 The Cascade is your Friend.

Slide 19

Slide 20

components cascade @simurai, “Back to the :roots”, 09/2015

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Aha-Moment #3 As much as necessary, As little as possible.

Slide 26

Slide 27

default default inherited inherited inherited necessary?

Slide 28

Slide 29

Slide 30

Be precise and explicit.

Slide 31

Aha-Moment #4 Establish Boundaries.

Slide 32

CC-BY Ella Olsson via Unsplash

Slide 33

CC-BY Ella Olsson via Unsplash

Slide 34

CC-BY Ella Olsson via Unsplash

Slide 35

Separate concerns and avoid dependencies.

Slide 36

Aha-Moment #5 Context is Key.

Slide 37

Block Formatting Context Document Flow Float Table Flexbox Grid Main / Cross Axis?

Slide 38

Firefox Developer Tools (v69)

Slide 39

Block Formatting Context Stacking Context Document Flow position / z-index Float Table Flexbox Grid Main / Cross Axis?

Slide 40

Block Formatting Context Stacking Context Document Flow position / z-index Float opacity Table transform Flexbox filter Grid mix-blend-mode clip-path Main / Cross Axis? -webkit-overflow-scrolling

Slide 41

When in doubt, look at the parents.

Slide 42

Aha-Moment #6 Content will change.

Slide 43

Slide 44

Mockup Luke Smith San Francisco, CA Reality Manuel D. Matuzović Null Lorem ipsum dolor sit amet, consect I write about HTML and CSS on my etur adipiscing elit, sed eius tempor personal site and I’ve also published incididunt exat labore et dolore sin articles on websites like https://alistapart.com/article/my-accessibilityjourney-what-ive-learned-so-far/ magna pariatur nulla.

Slide 45

object-fit: cover; Manuel D. Matuzović Null I write about HTML and CSS on my personal site and I’ve also published articles on websites like https://alistapart.com/article/my-accessibilityjourney-what-ive-learned-so-far/

Slide 46

object-fit: cover; padding-right: $avatar-width; Manuel D. Matuzović I write about HTML and CSS on my personal site and I’ve also published articles on websites like https://alistapart.com/article/my-accessibilityjourney-what-ive-learned-so-far/

Slide 47

object-fit: cover; padding-right: $avatar-width; word-wrap: break-word; Manuel D. Matuzović I write about HTML and CSS on my personal site and I’ve also published articles on websites like https:// alist-apart.com/article/my-access… !

Slide 48

Build a “blueprint” first, then stress-test with real content.

Slide 49

Aha-Moment #7 Let the Browser do the work.

Slide 50

CC-BY Neal E. Johnson via Unsplash

Slide 51

270px 270px 270px 270px

Slide 52

25% 25% 25% 25%

Slide 53

grid-template-rows repeat(auto-fill, minmax(250px, 1fr)

Slide 54

Try to encode the problem, not the calculated solution.

Slide 55

Aha-Moment #8 Embrace Flexibility.

Slide 56

1+1=2 x+y=z

Slide 57

Slide 58

“ We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” — John Allsopp, “A Dao of Web Design”

Slide 59

Slide 60

You don’t need absolute control.

Slide 61

Mental models are personal. What are yours?

Slide 62

дзякуй! bit.ly/css-mindset @mxbck