Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
3
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
1
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
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
3
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
3
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
1
https://vanillawebdev.blogspot.com/2025/02/blog-post.html
https://vanillawebdev.blogspot.com/2025/02/naming-async-function.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://www.blogger.com/comment/fullpage/post/8166404610182826392/7300131084389298532
true
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
https://vanillawebdev.blogspot.com/2025/02/blog-post.html
https://vanillawebdev.blogspot.com/2025/02/naming-async-function.html
https://vanillawebdev.blogspot.com/