Modern CSS for Dynamic Component-Based Architecture
Comprehensive article.<p>I’ve long given up trying to keep up with everything added to the spec since about `display: flex`. There’s just too much stuff, and the shoehorning of features into a syntax/spec from 1996 doesn’t appear to me to be a sustainable long term strategy to facilitate increasingly complex web applications.<p>Maybe it’s been considered, but some use of namespaces and modules in the syntax could at least help developers opt into specific CSS modules and let other developers know what magic they can expect to find in the stylesheet.<p>```
@use grid
@use container
@use layer<p>@layer layout {
  .layout-grid {
    --layout-grid-min: 30ch;
    --layout-grid-gap: 3vw;<p><pre><code>    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--layout-grid-min)), 1fr)
    );
    gap: var(--layout-grid-gap);
  }</code></pre>
}<p>@layer layout {
  :is(.layout-grid, .flex-layout-grid) > * {
    container: var(--grid-item-container, grid-item) / inline-size;
  }
}<p>```