[eurasiantiger]

”Never use margin if you can, use flex-box and grid with gaps instead. Placing a children node is parent's responsibility.”

Good idea, but importantly only applies to flex and grid layout, not paragraph-like blocks of content.

It is not a good practice to use flexbox for layout, especially if there are nested flexboxes. It takes a lot of time to recalculate such a layout, which can be seen when resizing a desktop browser, or when advertisements load on the page and the layout shifts.

”Write symmetric CSS. Prefer px over pl or pr, mx over ml or mr etc.”

Usually but not always. For example, text boxes can look more visually symmetric with less padding on the ragged side, while interaction-heavy mobile layouts may want to have a larger padding on the right to give the user something to safely scroll.

[amrocha]

"Good idea, but importantly only applies to flex and grid layout, not paragraph-like blocks of content."

What does this mean? What's the difference between the two?

[eurasiantiger]

Layout is made of container blocks, such as main, sidebar, header, footer.

Container blocks contain other container blocks or content blocks, but never both at the same time.

Content blocks are paragraph-like content and may contain blocks (headings, media) and inline content (leading and body text, captions).

Example hierarchy: layout > main content area > hero element > positioned container > content block > heading