I did a lot of front end work from about 2000-2015, but I've fallen into almost entirely backend professionally. That said, I still enjoy it and try to keep up. I have a side project SPA I developed using a css pattern I'm calling "apps"
Basically I have JS "controllers". Every controller type gets a root HTML element. They pick the element type, these root elements automatically get a css class ala "{controller}--app"
Then from within each of these controllers I largely only use un-classed HTML - and style almost entirely based on direct ancestor ">" operators. Something like
.sidebar--app {
> ul > li > a {
// style sidebar
}
}
I generally keep the scope of what is a "controller" pretty small, a few elements deep maximum. It's a sort of hierarchical mvc and controllers have controllers have controllers, so for instance my sidebar controller has a search controller. The search controller just manages its own elements and reports changes via events. This pattern has kept the JS and CSS very clean and understandable, and the generated HTML pristine.
I've been hacking on this for close to a decade, it's a fun little side project. It's pretty large in scope yet it's honestly been a delight to work on. The styling of everything is quite scoped so there's very little unexpected problems. The actual HTML is readable and pleasant.
Basically I have JS "controllers". Every controller type gets a root HTML element. They pick the element type, these root elements automatically get a css class ala "{controller}--app"
Then from within each of these controllers I largely only use un-classed HTML - and style almost entirely based on direct ancestor ">" operators. Something like
I generally keep the scope of what is a "controller" pretty small, a few elements deep maximum. It's a sort of hierarchical mvc and controllers have controllers have controllers, so for instance my sidebar controller has a search controller. The search controller just manages its own elements and reports changes via events. This pattern has kept the JS and CSS very clean and understandable, and the generated HTML pristine.I've been hacking on this for close to a decade, it's a fun little side project. It's pretty large in scope yet it's honestly been a delight to work on. The styling of everything is quite scoped so there's very little unexpected problems. The actual HTML is readable and pleasant.