remove where pseudo class, use cascade layers for global bundle

src/_layouts/post.njk

@@ -3,7 +3,7 @@ layout: base
 schema: blog
 ---
 
-<article class="region blog" style="--region-space-top: var(--space-xl-2xl)">
+<article class="region" style="--region-space-top: var(--space-xl-2xl)">
   <div class="wrapper flow prose">
     <h1 class="gradient-text">{{ title }}</h1>
 

src/assets/css/bundle/custom-card.css

@@ -23,7 +23,7 @@ custom-card ::selection {
 custom-card :is(h2, h3) {
   --flow-space: var(--space-m);
   grid-row: headline;
-  font-size: var(--size-step-2);
+  font-size: var(--size-step-base);
 }
 
 custom-card :is(h2, h3) a {
@@ -58,7 +58,6 @@ custom-card > footer {
 }
 
 /* avoid overflow of long words */
-
 custom-card :is(a, p, h2, h3) {
   overflow-wrap: break-word;
   word-wrap: break-word;

src/assets/css/bundle/post.css

@@ -1,12 +1,12 @@
-:where(.post) h1 {
+.post article h1 {
   font-size: var(--size-step-6);
 }
 
-:where(.post) h2 {
+.post article h2 {
   font-size: var(--size-step-3);
 }
 
-:where(.post) h3 {
+.post article h3 {
   font-size: var(--size-step-2);
 }
 

src/assets/css/global/base/reset.css

@@ -12,21 +12,24 @@
 }
 
 /* Typography */
-:where(*) {
+* {
   text-wrap: pretty;
 }
 
-:where(h1, h2, h3, h4) {
+h1,
+h2,
+h3,
+h4 {
   text-wrap: balance;
 }
 
 /* Scroll behavior */
-:where(html:focus-within) {
+html:focus-within {
   scroll-behavior: smooth;
 }
 
 /* Body defaults */
-:where(body) {
+body {
   min-height: 100vh;
   min-height: 100dvh;
   text-rendering: optimizeSpeed;
@@ -34,27 +37,40 @@
 }
 
 /* Margins */
-:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
   margin: 0;
 }
 
 /* List styles */
-:where(ul[role='list'], ol[role='list']) {
+ul[role='list'],
+ol[role='list'] {
   list-style: none;
 }
 
 /* Padding for lists */
-:where([role='list']) {
+[role='list'] {
   padding: 0;
 }
 
 /* Anchor styles */
-:where(a:not([class])) {
+a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
 /* Image styles */
-:where(img, picture, svg, canvas) {
+img,
+picture,
+svg,
+canvas {
   max-inline-size: 100%;
   block-size: auto;
   vertical-align: middle;
@@ -65,43 +81,51 @@
 }
 
 /* Button styles */
-:where(button) {
+button {
   all: unset;
 }
 
 /* Inherit fonts for inputs and buttons */
-:where(button, input, select, textarea) {
+button,
+input,
+select,
+textarea {
   font: inherit;
   color: inherit;
 }
 
 /* Textarea styles */
-:where(textarea) {
+textarea {
   resize: vertical;
   resize: block;
 }
 
 /* Textarea height */
-:where(textarea:not([rows])) {
+textarea:not([rows]) {
   min-height: 10em;
 }
 
 /* Cursor styles */
-:where(button, label, select, summary, [role='button'], [role='option']) {
+button,
+label,
+select,
+summary,
+[role='button'],
+[role='option'] {
   cursor: pointer;
 }
 
 /* Scroll margin above anchor links */
-:where(:target) {
+:target {
   scroll-margin-block-start: 2ex;
 }
 
 /* Scroll margin below focused elements */
-:where(:focus) {
+:focus {
   scroll-margin-block-end: 8vh;
 }
 
-:where(dialog) {
+dialog {
   border: none;
   background: none;
   inset: unset;
@@ -109,7 +133,7 @@
   max-height: unset;
 }
 
-:where([popover]) {
+[popover] {
   border: none;
   background: none;
   inset: unset;
@@ -117,13 +141,13 @@
 }
 
 /*  hide dialog elements without open or popover attributes, and elements with a popover attribute that are not in an open state. */
-:where(dialog:not([open], [popover])),
+dialog:not([open], [popover]),
-:where([popover]:not(:popover-open)) {
+[popover]:not(:popover-open) {
   display: none !important;
 }
 
 /* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */
-:where(html:has(dialog[open]:modal)) {
+html:has(dialog[open]:modal) {
   overflow: hidden;
 }
 

src/assets/css/global/compositions/cluster.css

@@ -15,7 +15,7 @@ horizontally. Can be any acceptable flexbox aligmnent value.
 Can be any acceptable flexbox alignment value.
 */
 
-:where(.cluster) {
+.cluster {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, var(--space-s-l));

src/assets/css/global/compositions/flow.css

@@ -3,6 +3,6 @@ FLOW UTILITY
 Like the Every Layout stack: https://every-layout.dev/layouts/stack/
 Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
 */
-:where(.flow) > * + * {
+.flow > * + * {
   margin-block-start: var(--flow-space, 1em);
 }

src/assets/css/global/compositions/grid.css

@@ -14,7 +14,7 @@ ideally, as a minimum.
 --grid-placement (auto-fill): Set either auto-fit or auto-fill
 to change how empty grid tracks are handled */
 
-:where(.grid) {
+.grid {
   display: grid;
   grid-template-columns: repeat(
     var(--grid-placement, auto-fill),
@@ -23,17 +23,17 @@ to change how empty grid tracks are handled */
   gap: var(--gutter, var(--space-s-m));
 }
 
-:where(.grid)[data-rows='masonry'] {
+.grid[data-rows='masonry'] {
   grid-template-rows: masonry;
   align-items: start;
 }
 
-:where(.grid)[data-layout='50-50'] {
+.grid[data-layout='50-50'] {
   --grid-placement: auto-fit;
   --grid-min-item-size: clamp(16rem, 50vw, 28rem);
 }
 
-:where(.grid)[data-layout='thirds'] {
+.grid[data-layout='thirds'] {
   --grid-placement: auto-fit;
   --grid-min-item-size: clamp(16rem, 33%, 30rem);
 }

src/assets/css/global/compositions/repel.css

@@ -11,7 +11,7 @@ between each item.
 Can be any acceptable flexbox alignment value.
 */
 
-:where(.repel) {
+.repel {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -19,6 +19,6 @@ Can be any acceptable flexbox alignment value.
   gap: var(--gutter, var(--space-s-l));
 }
 
-:where(.repel)[data-nowrap] {
+.repel[data-nowrap] {
   flex-wrap: nowrap;
 }

src/assets/css/global/compositions/sidebar.css

@@ -19,18 +19,18 @@ EXCEPTIONS
 .sidebar[data-direction='rtl']: flips the sidebar to be on the right
 */
 
-:where(.sidebar) {
+.sidebar {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, var(--space-s-l));
 }
 
-:where(.sidebar):not([data-direction]) > :first-child {
+.sidebar:not([data-direction]) > :first-child {
   flex-basis: var(--sidebar-target-width, 20rem);
   flex-grow: 1;
 }
 
-:where(.sidebar):not([data-direction]) > :last-child {
+.sidebar:not([data-direction]) > :last-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: var(--sidebar-content-min-width, 50%);
@@ -39,12 +39,12 @@ EXCEPTIONS
 /*
 A flipped version where the sidebar is on the right
 */
-:where(.sidebar)[data-direction='rtl'] > :last-child {
+.sidebar[data-direction='rtl'] > :last-child {
   flex-basis: var(--sidebar-target-width, 20rem);
   flex-grow: 1;
 }
 
-:where(.sidebar)[data-direction='rtl'] > :first-child {
+.sidebar[data-direction='rtl'] > :first-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: var(--sidebar-content-min-width, 50%);

src/assets/css/global/global.css

@@ -1,18 +1,18 @@
-@import 'tailwindcss/base';
+@import 'tailwindcss/base' layer(tailwindBase);
 
-@import 'base/reset.css';
+@import 'base/reset.css' layer(reset);
-@import 'base/fonts.css';
+@import 'base/fonts.css' layer(fonts);
 
-@import 'tailwindcss/components';
+@import 'tailwindcss/components' layer(tailwindComponents);
 
-@import 'base/variables.css';
+@import 'base/variables.css' layer(variables);
-@import 'base/global-styles.css';
+@import 'base/global-styles.css' layer(global);
 
-@import-glob 'compositions/*.css';
+@import-glob 'compositions/*.css' layer(compositions);
-@import-glob 'blocks/*.css';
+@import-glob 'blocks/*.css' layer(blocks);
-@import-glob 'utilities/*.css';
+@import-glob 'utilities/*.css' layer(utilities);
 
 /* debugging */
-/* @import-glob 'tests/*.css'; */
+/* @import-glob 'tests/*.css' layer(test); */
 
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities' layer(tailwindUtilities);

src/docs/css.md

@@ -8,13 +8,12 @@ The methodology used is [CUBE CSS.](https://cube.fyi/)
 
 The CSS system of this starter was invented by Andy Bell. If you want to know exactly how it all works, and have a look at the (further elaborated) original, [read this article on piccalil.li](https://piccalil.li/blog/a-css-project-boilerplate/).
 
-**New in version 3.0: Inline CSS**
+**New in version 3.0: Inline CSS and bundles**
 
 The main CSS file is now inline in production to improve performance, see `.src/_includes/head/css-inline.njk`.
 
 You can add per-page or component bundles of CSS. Instead of adding your CSS file to the `src/assets/css/global/blocks/` directory, you can place them in `src/assets/css/bundle/`. All CSS files in there will be stored alongside `global.css` in `.src/_includes/css/`. You can now include them in the "inline" bundle only on pages or components where you need them:
 
-
 {% raw %}
 
 ```jinja2
@@ -34,3 +33,7 @@ All CSS files placed in `src/assets/css/components/` will be sent to the output
 In `src/assets/css/global.css` you can decomment `@import-glob 'tests/*.css';` to include CSS for debugging.
 
 It makes visible when your code[ wrapped in `<is-land>` elements](https://github.com/11ty/is-land) is being hydrated, where things might overflow and many other warnings and errors [that Heydon Pickering came up with](https://heydonworks.com/article/testing-html-with-modern-css/).
+
+**New in version 4.0: Cascade layers**
+
+We now use cascade layers! Up until now, I used the `:where` pseudo-class to create low specificity selectors for the reset and compositions. [Mayank inspired me](https://mayank.co/blog/css-reset-layer/) to change to cascade layers. We have two major bundles of CSS: everything included in "global" In `src/assets/css/global/global.css` is now organized in cascade layers. The "local" bundle is for per-page or component CSS, and does not use cascade layers - it has thus a higher specificity, independent of any selector specificity in the global CSS.