A presentation at CSS-Minsk-JS in in Minsk, Belarus by Max Böck
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
Robin Rendle, CSS-Tricks Newsletter, Issue #151
Robin Rendle, CSS-Tricks Newsletter, Issue #151
THE CSS MINDSET
Aha-Moment #1 Everything is a Box.
Heydon Pickering / Andy Bell, every-layout.dev
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
CC-BY Ella Olsson via Unsplash
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
It seems like every week there’s another heated debate on how to solve the complexities that come with writing CSS. It’s too simple. It’s too hard. It’s unpredictable. Why is CSS such a frustrating language for many developers?
Aside from knowing the technical features of the language, there is a certain way of thinking that helps to solve problems in CSS. Usually experienced through trial-and-error, there are those “aha!” moments when things finally start to click. When we learn to work with the medium, instead of fighting it at every turn.
In this talk, we will take a look at what it means to “think in CSS” and how to develop the mindset necessary to write efficient, resilient and maintainable styling.
for free. You
can too.