Refactoring (the way we talk about) CSS

Refactoring (the way we talk about) CSS. Rachel Andrew @ CSS Day 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

Teaching CSS in the same structured way we would any other language. Slides & resources https://noti.st/rachelandrew

• • • • • • • • • Flow Layout Changing the value of display Out of flow elements Block 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 to 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

Busting out of flow Slides & resources https://noti.st/rachelandrew

position Slides & resources https://noti.st/rachelandrew

.position { position: absolute; } Slides & resources https://noti.st/rachelandrew

float 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

Creating a new Block Formatting Context 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 teach 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

Safe and Unsafe alignment Avoiding CSS data loss Slides & resources https://noti.st/rachelandrew

.example { display: flex; flex-direction: column; align-items: center; } Slides & resources https://noti.st/rachelandrew

.example { display: flex; flex-direction: column; align-items: safe center; } Slides & resources https://noti.st/rachelandrew

Box Sizing https://drafts.csswg.org/css-sizing-3/ 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 and teaching CSS as a weird and quirky thing. Slides & resources https://noti.st/rachelandrew

CSS is unlike other languages because it serves environments like no other. Slides & resources https://noti.st/rachelandrew

Teach CSS as it is today. Slides & resources https://noti.st/rachelandrew

Thank you! @rachelandrew Slides & resources https://noti.st/rachelandrew