Update CSS structure to better align with our best practices

[fabiankaegy]

We've been talking a lot about our updated CSS best practices. Now that we are closing in on releasing them I'd like to start looking into how we can actually update the scaffold to better align with those best practices. This issue here is meant to be the main tracking issue for any work we want to handle as part of this.

Tasks:

• Adopt the ITCSS structure for writing CSS
• Overhaul our CSS reset
• Add proper defaults for handling block spacing in content areas (.is-layout-constrained)

[fabiankaegy]

@dmtrmrv After our discussion a bit ago I did some digging into the actual order in which WordPress prints the stylesheets in the head of the document.

We can leverage this to determine where / how we want to inject the various layers of ITCSS or if it is even viable to have a pure ITCSS implementation within this already existing style order.

Styles Loading order:

1. Individual Block Stylesheets (both inlined style & link tags) wp_enqueue_block_style & styles added in block.json
2. Styles added via enqueue_block_assets hook
3. theme.json generated global styles (global-styles-inline-css)
4. Block Supports auto-generated styles (core-block-supports-inline-css)
5. Styles added via wp_enqueue_scripts hook
6. theme.json defined font faces (wp-fonts-local)

Essentially what we have today is:

What we would probably want is:

[fabiankaegy]

Also separately with the CSS reset my main questions are around handling the spacing between blocks in constrained layout areas. WordPress does it via margin top applied to all blocks equally.

That works but isn't really enough for nicely laid out content.

Instead a heading may have more spacing ahead of it than a paragraph. And an image may have even more both ahead of it and after it.

In order to control the vertical rhythm here I've seen lots of different approaches.

Ideally the scaffold should already have an opinion about how to handle it and have it well documented.