A presentation at Nordic.js in in Stockholm, Sweden by Rachel Andrew
Refactoring (the way we talk about) CSS. Rachel Andrew @ Nordic.js Slides & resources https://noti.st/rachelandrew
Doing things on the web since 1996 Co-founder Perch CMS & Notist. Editor in Chief Smashing Magazine. Writer of many books. CSS Working Group Member representing Fronteers. Spec editor Multicol and Page Floats. MDN tech writer. Slides & resources https://noti.st/rachelandrew
I thought that I had teaching CSS layout all figured out Slides & resources https://noti.st/rachelandrew
Talking about CSS as a layout system Slides & resources https://noti.st/rachelandrew
CSS can be explained in the same structured way we use for other languages. Slides & resources https://noti.st/rachelandrew
• • • • • • • • • Flow Layout Changing the value of display Out of flow elements Formatting Contexts Writing Modes Logical, flow-relative properties and values Alignment Sizing Media & Feature Queries Slides & resources https://noti.st/rachelandrew
Understanding display Slides & resources https://noti.st/rachelandrew
Normal Flow Block and Inline Layout Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
CSS is doing work for us, before we write any CSS. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.example { display: flex; } Slides & resources https://noti.st/rachelandrew
.example { display: grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew
Changing the value of display changes that element and its direct children. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
The two values of display Slides & resources https://noti.st/rachelandrew
.example { display: block grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew
.example { display: inline grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew
The outer display type How the box behaves in the layout - block or inline Slides & resources https://noti.st/rachelandrew
The inner display type The formatting context of the direct children – grid, flex etc. Slides & resources https://noti.st/rachelandrew
Creating a new Block Formatting Context Slides & resources https://noti.st/rachelandrew
.box { background-color: rgb(43,91,128); } Slides & resources https://noti.st/rachelandrew
display: flow-root Slides & resources https://noti.st/rachelandrew
.box { background-color: rgb(43,91,128); display: flow-root; } Slides & resources https://noti.st/rachelandrew
Writing Modes Slides & resources https://noti.st/rachelandrew
writing-mode: horizontal-tb; Inline Dimension Block Dimension Slides & resources https://noti.st/rachelandrew
writing-mode: vertical-rl; Block Dimension Inline Dimension Slides & resources https://noti.st/rachelandrew
Block Start Block Start Block End Block End Slides & resources https://noti.st/rachelandrew
Inline Start Inline End Inline Start Inline End Slides & resources https://noti.st/rachelandrew
Web layout was tied to physical dimensions We think in top, right, bottom, left. Or width & height. Slides & resources https://noti.st/rachelandrew
.example { width: 600px; height: 300px; } Slides & resources https://noti.st/rachelandrew
Logical Properties & Values Slides & resources https://noti.st/rachelandrew
.example { inline-size: 600px; block-size: 300px; } Slides & resources https://noti.st/rachelandrew
inline-size = width block-size = height Slides & resources https://noti.st/rachelandrew
block-size = width inline-size = height Slides & resources https://noti.st/rachelandrew
Physical v. Logical .example { padding-top: 10px; padding-right: 2em; margin-bottom: 2em; } .example { padding-block-start: 10px; padding-inline-end: 2em; margin-block-end: 2em; margin-inline: 1em; } Slides & resources https://noti.st/rachelandrew
.example { border-start-start-radius: 20px; border-start-end-radius: 3em; border-end-start-radius: 2em 4em; border-end-end-radius: 5px; } Slides & resources https://noti.st/rachelandrew
We need to think in terms of this flow-relative, logical world. Slides & resources https://noti.st/rachelandrew
Box Alignment https://drafts.csswg.org/css-align/ Slides & resources https://noti.st/rachelandrew
Aligning things in the block and inline dimensions. Slides & resources https://noti.st/rachelandrew
Distribution of space and alignment of items within their space. Slides & resources https://noti.st/rachelandrew
Block Start Inline Start Slides & resources https://noti.st/rachelandrew
justify-content In Grid, inline dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew
.example { justify-content: space-between; } Slides & resources https://noti.st/rachelandrew
align-content In Grid, block dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew
.example { align-content: end; } Slides & resources https://noti.st/rachelandrew
In flexbox, we justify on the main axis and align on the cross axis Slides & resources https://noti.st/rachelandrew
justify-content In Flex, main axis space distribution between flex items Slides & resources https://noti.st/rachelandrew
.example { justify-content: flex-end; } Slides & resources https://noti.st/rachelandrew
align-content In Flex, cross axis space distribution between flex lines Slides & resources https://noti.st/rachelandrew
.example { align-content: space-around; } Slides & resources https://noti.st/rachelandrew
For –content properties to do anything, you must have spare space to distribute! Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.item { justify-self: end; align-self: end; } Slides & resources https://noti.st/rachelandrew
.example { justify-items: end; align-items: end; } Slides & resources https://noti.st/rachelandrew
“[justify-content] does not apply to flex items, because there is more than one item in the main axis.” Slides & resources https://noti.st/rachelandrew
.item { align-self: center; } Slides & resources https://noti.st/rachelandrew
“Prior to alignment via justifycontent and align-self, any positive free space is distributed to auto margins in that dimension.” Slides & resources https://noti.st/rachelandrew
.example div:last-child { margin-left: auto; } Slides & resources https://noti.st/rachelandrew
Let’s stop calling stuff that is in the spec a CSS ‘hack’ Slides & resources https://noti.st/rachelandrew
What about the Box Model? Slides & resources https://noti.st/rachelandrew
When we had to control the size of each item in a layout, the Box Model was key. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
500px Slides & resources https://noti.st/rachelandrew
30px + 500px + 30px Slides & resources https://noti.st/rachelandrew
5px + 30px + 500px + 30px + 5px Slides & resources https://noti.st/rachelandrew
40px + 5px + 30px + 500px + 30px + 5px + 40px Slides & resources https://noti.st/rachelandrew
What is the inline-size or width of the box? By default, the content-box Slides & resources https://noti.st/rachelandrew
If you want the specified width to include padding and border Set the box-sizing property to border-box. Slides & resources https://noti.st/rachelandrew
.example { box-sizing: border-box; } Slides & resources https://noti.st/rachelandrew
How big is that box? Slides & resources https://noti.st/rachelandrew
In the past everything was a length or a percentage. Slides & resources https://noti.st/rachelandrew
What is the minimum and maximum size of this thing? Slides & resources https://noti.st/rachelandrew
.example { grid-template-columns: min-content max-content; } Slides & resources https://noti.st/rachelandrew
Any content-based sizing is worked out based on these min and max content sizes. Slides & resources https://noti.st/rachelandrew
.example { display: flex; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: 1; } Slides & resources https://noti.st/rachelandrew
Old browsers. They exist. Slides & resources https://noti.st/rachelandrew
We have a specification. Some of it isn’t implemented yet. Slides & resources https://noti.st/rachelandrew
Lack of support is very different to the buggy support of the past. Slides & resources https://noti.st/rachelandrew
Media & Feature Queries How big is my viewport? Is this a touchscreen? Does this browser support Grid? Respond based on the answers. Slides & resources https://noti.st/rachelandrew
We need to stop talking about CSS as a weird and quirky thing. Slides & resources https://noti.st/rachelandrew
CSS is different. Not wrong, not impossible to understand as a system. Slides & resources https://noti.st/rachelandrew
Learn and teach CSS as it is today. Slides & resources https://noti.st/rachelandrew
Thank you! @rachelandrew Slides & resources https://noti.st/rachelandrew
Rachel Andrew has been writing CSS for 20 years, and teaching people the things she has learned for almost as long. Since the early days of CSS, and certainly since “CSS for Layout” became a thing, we’ve been teaching CSS in pretty much the same way. Here is a block thing, here is an inline thing, this is the Box Model … and here is this weird jumping through hoops that makes a layout. It’s time for a change.
In this talk Rachel will explain how, in the last few years, CSS has been refactored to an extent that to really explain how CSS works we need to change the way we teach and talk about the language. We need to look again at what it is to learn CSS. We need to leave our old ideas behind. It is only when we do, that we will stop supporting the idea that CSS is the fragile, broken, quirky language that its detractors would like to believe.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
