Why would I want to create an array called 'layer'?
Web Development
Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development
What is web development?
Web development is the process of creating websites or web applications
Rules/Guidelines
- Follow the programming.dev site rules
- Keep content related to web development
- If what you're posting relates to one of the related communities, crosspost it into there to help them grow
- If youre posting an article older than two years put the year it was made in brackets after the title
Related Communities
- !html@programming.dev
- !css@programming.dev
- !uiux@programming.dev
- !a11y@programming.dev
- !react@programming.dev
- !vuejs@programming.dev
- !webassembly@programming.dev
- !javascript@programming.dev
- !typescript@programming.dev
- !nodejs@programming.dev
- !astro@programming.dev
- !angular@programming.dev
- !tauri@programming.dev
- !sveltejs@programming.dev
- !pwa@programming.dev
Wormhole
Some webdev blogs
Not sure what to post in here? Want some web development related things to read?
Heres a couple blogs that have web development related content
- https://frontendfoc.us/ - [RSS]
- https://wesbos.com/blog
- https://davidwalsh.name/ - [RSS]
- https://www.nngroup.com/articles/
- https://sia.codes/posts/ - [RSS]
- https://www.smashingmagazine.com/ - [RSS]
- https://www.bennadel.com/ - [RSS]
- https://web.dev/ - [RSS]
Haven't found a use case for it yet.
If you've used it, please give me some examples of how you used it to solve a styling problem that otherwise would have been difficult or messy with other css rules.
It's been a while, so I'm not sure about the details, but I had some elements on our website that I wanted to show when our extension was installed, and hide if not. I think I used layers, and then had the extension move the layer priority order. Was a clean way to fence off the extension-specific code.
I think it really helps if you dont like !important:
@layer base, toggles;
@layer toggles {
.wprm-print-hide-recipe-nutrition .wprm-recipe-nutrition-label-section {
display: none;
}
}
instead of
.wprm-print-hide-recipe-nutrition .wprm-recipe-nutrition-label-section {
display: none !important;
}
I guess I answered my own question - I think its a neat feature and ill use it.