The CSS Mindset

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

“Just shows the ridiculous fragility of CSS.”

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

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

Why is CSS such a frustrating language for many developers?

Robin Rendle, CSS-Tricks Newsletter, Issue #151

THE CSS MINDSET

Aha-Moment #1 Everything is a Box.

Heydon Pickering / Andy Bell, every-layout.dev

{ outline: 2px solid hotpink; }

Firefox Developer Tools (v69)

Aha-Moment #2 The Cascade is your Friend.

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

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

default default inherited inherited inherited necessary?

Be precise and explicit.

Aha-Moment #4 Establish Boundaries.

CC-BY Ella Olsson via Unsplash

Separate concerns and avoid dependencies.

Aha-Moment #5 Context is Key.

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

Firefox Developer Tools (v69)

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

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

When in doubt, look at the parents.

Aha-Moment #6 Content will change.

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.

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/

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/

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… !

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

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

CC-BY Neal E. Johnson via Unsplash

270px 270px 270px 270px

25% 25% 25% 25%

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

Try to encode the problem, not the calculated solution.

Aha-Moment #8 Embrace Flexibility.

1+1=2 x+y=z

“ 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”

You don’t need absolute control.

Mental models are personal. What are yours?

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