CSS Layers to fix CSS collision

[dragontheory]

Need support for older browsers.

Cascade layers are (or will soon be) available by default in all the three major browser engines:

• Chrome/Edge 99+
• Firefox 97+
• Safari (currently in the Technology Preview)

---

Need to fix CSS conflicts like this:

@layer search-results-panel {

}

@layer search-results-panel-header {

}

https://css-tricks.com/css-cascade-layers/

[dragontheory]

Layers vs Scopes

https://css-tricks.com/css-cascade-layers/#aa-scoping-and-name-spacing-styles-nope

Image of layers vs scope.

Scopes describe WHAT we are styling, while layers describe WHY we are styling.

Example: Scope is the styles individual components

Layers are the styles that are shared cross components

We can also think of layers as representing WHERE the style comes from, while scopes represent WHAT the style will attach to.

[ Proposed ] Visual map of layers

@layer reset {
  *:before, *:after, *, ::after, ::before {box-sizing: border-box;}
 }

@layer typography{ 
 ...
}

@layer themes { 
  @layer dark { 
    ...
  }
  @layer light { 
    ...
  }
}

@layer utilities{ 
  ...
}

[dragontheory]

@bob2517

FYI. Just pushed some of this code. Firefox is having issues with supporting @layer. Will push something with @support soon.

[bob2517]

Ok, will bear in mind.

[dragontheory]

For reference...

https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

"For years, developers have used Modernizr to do what Feature Queries do — but Modernizr requires JavaScript. While the scripts might be tiny, CSS architected with Modernizr requires the JavaScript file to download, to execute, and to complete before the CSS is applied. Involving JavaScript will always be slower than only using CSS. Requiring JavaScript opens up the possibility of failure — what happens if the JavaScript doesn’t execute? Plus, Modernizr requires an additional layer of complexity that many projects just can’t handle. Feature Queries are faster, more robust, and much simpler to use."

"You might notice the syntax of a Feature Query is a lot like a Media Query. I think of them as cousins."

@supports (display: grid) {
  main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

"Now most of the time, you do not need such a test in your CSS. For example, you can write this code without testing for support:"

aside {
  border: 1px solid black;
  border-radius: 1em;
}

"If a browser understands border-radius, then it will put rounded corners on the aside box. If it doesn’t, it will skip that line of code and move on, leaving the edges of the box to be square. There is no reason to run a test or use a Feature Query. This is just how CSS works. It’s a fundamental principle in architecting solid, progressively-enhanced CSS. Browsers simply skip over code they don’t understand, without throwing an error."

[bob2517]

Just so you know, ACSS only supports back as far as the first Edge, and doesn't support IE. The core will never handle anything earlier than that.

[dragontheory]

Just so you know, ACSS only supports back as far as the first Edge, and doesn't support IE. The core will never handle anything earlier than that.

Yes! Totally agree! Microsoft has given up the ghost on IE and so have I. lol

Interesting enough though, since Edge uses Chrome's rendering engine, Firefox is now getting a lot of the heat IE was used to getting as being the standout.

[dragontheory]

@layers do not seem to be the best at scoping CSS to minimize writing exceptions.

But local CSS variables override global CSS variables.

So...

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}