https://vanillawebdev.blogspot.com/2025/01/local-development-server-setup.html
https://vanillawebdev.blogspot.com/2025/01/css-classname-in-js.html
https://vanillawebdev.blogspot.com/2025/01/css-classname-in-js.html?max-results=20
https://vanillawebdev.blogspot.com/
user_r100
//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizihHpchmJoGeEVuJGCATZpHw9BgxolQLkV-Mw0hXTuIjdZQ8e_AeFQZdY6r5UrGWerl4b3Qx4aYsVx2w9y474FJvlyZDZiNcCLLNNQly7M3NZ8Xz1g2dsxQh3yuQJln2e6JTJtzci506US-j64gEDelPT-QYo7_TFH1kTp6AapPzrZQ/s220/channels4_profile.jpg
4758555848598850133
https://vanillawebdev.blogspot.com/2025/01/widget-elements-css.html
Thinking Elements as Widgets in CSS
January 22, 2025
2025
January
22
11:36 PM
If you haven't used one yet, try giving the .wg- class name prefix for elements that you see as a single entity, be it a button or a container. No styling should be added to elements without the .wg- prefix.
If you're styling a container, then you can start using a more general name for class names. With CSS nesting and the super class .wg-, you can worry less about conflicted class names.
.wg-btn-default {
/* ... */
}
.wg-btn-danger {
/* ... */
}
.wg-dialog-edit-activity {
& { /* ... */ }
.header { /* ... */ }
.content { /* ... */ }
}
.wg-dialog-settings {
& { /* ... */ }
.header { /* ... */ }
.content { /* ... */ }
}
***
Trivia:
https://www.blogger.com/rpc_relay.html
https://www.blogger.com/comment/frame/8166404610182826392?po=4758555848598850133&hl=en&saa=85391&origin=https://vanillawebdev.blogspot.com&skin=contempo
https://vanillawebdev.blogspot.com/2025/01/widget-elements-css.html#comments
true
["@lvc","css-tips"]
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/css-tips
css-tips
https://vanillawebdev.blogspot.com/2025/01/local-development-server-setup.html
https://vanillawebdev.blogspot.com/2025/01/css-classname-in-js.html
https://vanillawebdev.blogspot.com/