Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/02/overlay-sidebar.html
https://vanillawebdev.blogspot.com/2025/02/jsconfig-setup.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/02/css-nesting-tips-for-chrome-devtools.html
CSS Nesting Tips for Chrome DevTools
February 09, 2025
2025
February
09
12:45 PM
You would want to use & to style the root element. This helps DevTools insert new properties in the right place. Otherwise, it will insert new properties right before the closing brackets, which is badly formatted (if that's even an issue that has not been fixed).
.recent-bar {
& {
background: #5b5b5b;
}
.progress {
/* ... */
}
}Next, if you prefer to apply change directly in DevTools by loading the source code into workspace, then, you might want to leave an empty asterisk (*) selector so that you can find the style block faster by inspecting any of the child element using inspect element tool.
.recent-bar {
* {}
.progress {
/* ... */
}
}
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
https://vanillawebdev.blogspot.com/2025/02/overlay-sidebar.html
https://vanillawebdev.blogspot.com/2025/02/jsconfig-setup.html
https://vanillawebdev.blogspot.com/