Next up: Rachel Andrew explains How to Understand CSS. Because this year I used Twitter’s threading / topics feature, it’s giving me 2 tweets in each embed I do here. I’m embedding every other tweet for readability. There’s a PDF at the bottom of the page in case this all collapses.
Learning CSS means learning how and why CSS works, rather than showing you some copy and paste code. Revisit the things you already know. Things that made sense in 2005 may not make sense anymore. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Some CSS has weird names, weird casing, and odd rules. We can’t break the web — we can’t always fix the things we consider weird. The CSS Working Group (WG) has a list. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Writing modes: flex box and grid introduced a writing mode agnostic way to do layout. No top, right, bottom, and left. Instead start and end, line number, etc. Block dimension is displayed in the direction we read blocks. (Up down in English.) #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
writing mode vertical r-l get wonky when the direction is changed – the width and height aren’t related to the flow of content. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Flow-relative dimensions will eventually become our defaults.
Margin is currently clock-face today. Grid-area uses starts and ends. But margin is old and we can’t break it, we have to figure out what to do with it. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Layout: items participate in block formatting by default. (not grid or flex box, etc.) Normal flow is a layout method. We don’t need to define how every single element looks.
We don’t need reset stylesheets anymore, work with the browser default styles to create. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
You can use anything you like, block, grid, and flexbox are all just display values. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
you can use this to do things like lines either side of a heading in a grid. [The example is awesome. i can’t tell you how many complex layouts I’ve seen to put little touches like lines around a header on a page.] #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
display: flow-root creates a new block formatting context. things can’t poke out of the initial page. everything stays inside that particular block. [OMG!]
“Start over, don’t let anything out of this box.”
[OMG OMG!]
— Anne Gibson (@perpendicularme) October 11, 2021
Maybe it should be called “margin combining” – one margin ends up inside the other.
Only collapses in the block dimension.
Only collapses for block formatted items.
Margin-bottom of paragraph 1 combines with the margin top of paragraph 2, so the larger margin wins #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Margin collapse can be really handy when your CMS is adding empty paragraphs. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Box alignment. This is alignment and space distribution. Alignment is why we talk about writing modes. Alignment is very much specified by the writing mode of the document. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Align-start for block and inline will put things in the top left corner and go from there.
Justify-content will space things out in the inline dimension.
In the block space, we use align-content. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
if you switch into flexbox you don’t have justify-self, items act as a group. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
if the properties end with -content they’re dealing with space distribution. If they end in -items or -self they align within the grid area #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
Rachel Andrew lays out the core concepts needed to fully understand the new CSS as the #CSS Power Block at #AEAOT continues. #TheMoreYouKnow #CSS #frontend #design #development #UXUI #webdesign #webdevelopment #conference @AnEventApart @rachelandrew
— zeldman (@zeldman) October 11, 2021
Everything in CSS is a box. A block level box expands to fill the inline directions and it grows to the height of its content in the block direction.
— Anne Gibson (@perpendicularme) October 11, 2021
If you want your specified box to be the content box, padding, and the border, set the box-sizing to border-box. [Math is so much easier for me this way.]
We don’t typically take control of sizing the way we used to though. #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
any content-based sizing is worked out based on min and max content sizes. This is really clear in flexbox. the items go to max-content size by default.
if we set flex-auto on those items, they stretch. if the content’s the same they may look the same #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
in grid, three tracks set to auto, the smaller items have space. grid starts at min-content and adds space which is the opposite of how flex works. All the sizing is in the spec for all of us to read.
— Anne Gibson (@perpendicularme) October 11, 2021
Th MDN property pages are very much designed to give you the information in the specs in a developer-centric way.
[Designers: knowing these pages can make explaining to a developer how to fix a bug easier.] #aeaot
— Anne Gibson (@perpendicularme) October 11, 2021
My slides, resources, and a pile of code examples to go with my talk at An Event Apart today can be found here https://t.co/cT4vMWUFiB #AEAOT
— Rachel Andrew (@rachelandrew) October 11, 2021
Here’s a PDF of this post (which might not be accessible because I’m using print-to-PDF to generate it, my apologies) in case Twitter kicks it and all the tweets disappear. An Event Apart OT 2021 How to Understand CSS by Rachel Andrew – Perpendicular Angel Design