Suggestion: Separate CSS and JS class names

[vfonic]

I'm working on Dawn theme for a client and I've been adding cart drawer upsell products. The upsell products show both in empty and non-empty cart.

I'm essentially rendering very similar layout for both empty and non-empty cart.

I've encountered several issues with cart and cart drawer (web) components.

It's quite difficult to manage state and there's a lot of "feature envy" or tight coupling as every component knows about several other components (both parent and child components).

There's also tons of things like this:

const lineItem = document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`);

const lineItemError = document.getElementById(`Line-item-error-${line}`) || document.getElementById(`CartDrawer-LineItemError-${line}`);

const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors');

const cartStatus = document.getElementById('cart-live-region-text') || document.getElementById('CartDrawer-LiveRegionText');

First, this code assumes that all of these components being fetched by getElementById are global.
Second, this code assumes there's either a full-page cart or cart drawer. What happens when customer navigates to /cart and the theme uses cart drawer? It's really easy to navigate to /cart. Any user can do it by clicking on cart icon while the page is loading (before the click handlers are attached) or by clicking on "Cart" in the checkout steps header.

---

Another thing that I had issues with was that the theme's JavaScript assumed that an empty cart layout had to have an element with .drawer__inner-empty in .drawer__inner cart wrapper.
Since I have more-less the same layout for empty and non-empty cart, I hit this error, and had to add one more level of nesting: <div class="{% if cart == empty %}drawer__inner-empty{% endif %}">. This in turn broke the parent's <div class="drawer__inner"> styles and I had to put half of the .drawer__inner styles on its new child .drawer__inner-empty.

It would help if:

1. There was a more unified system to track application state
2. There was unified way to publish events or call methods directly on components, not both. (this.cart.renderContents() vs publish(PUB_SUB_EVENTS.cartUpdate, {source: 'cart-items'}); can we just use one, please?
3. CSS and JS class names were separated. I suggest prepending all class names used in JS code with js-. This will make it obvious what each class is used for (CSS or JS) and we can decouple HTML structure from JS code.