Editing Anki CSS/html

Anki Suggestions
3

@boydkelly
I think just the ability to open templates in external editors would not improve the experience that much, because there’s still the issue of repeating components in templates. You say you have 4 cards, but now imagine that would be 20+ templates which are mostly similar except for small differences. Making a change to one, would mean you have to change it for all 20+.

Regarding the differences between Desktop and Mobile, that’s because Anki and AnkiDroid are developed by different teams, and now to warrant breaking backwards compatibility, you’d better have a good reason. However the future does bode well here. In the future, AnkiDesktop, AnkiDroid and AnkiMobile (on iOS) are gonna share more and more components, because AnkiDesktop already has a “backend library” which can/is also be used by AnkiDroid.

@kleinerpirat
Anki does not rebuild the DOM for efficiency purposes. Having to reload MathJax, jQuery libraries, etc. on every single card is pretty wasteful. In the future AnkiDroid will also probably head that way.
A strategy to avoid running code too many times is “guards”, where you have a variable, which checks, whether a specific code was already run:

// globally
if (!globalThis.myCodeIntialized) {
    // run my code
    globalThis.myCodeInitialized = true;
}

// or for specific HTML elements
if (!htmlElement.hasAttribute("has-myCode")) {
    // setup htmlElement
    htmlElement.setAttribute("has-myCode", "");
}

When I design a new card type, I also typically start in an external editor, and a browser window. You can test your template in multiple browsers, to make it more likely that it looks good on all platforms.

Besides that, the same things that are true for Web development as are true for Anki templates: Prefer CSS over JS for styling, Keep your HTML simply, etc.