In web development, there are many laborious design components that practically need to be written almost every time.

Typical examples are form elements such as radio buttons and select boxes.

It's almost never the case that a designer's design can be directly translated into HTML. So, engineers repeatedly perform tasks such as:

• Creating many additional tags to properly enclose the components.
  
• Properly assigning classes to each.
• Partially hiding the original components.
• Drawing new components using CSS.
• Moving displayed components so that their relative positions are not broken.
• Changing their appearance during mouseover or touch interactions.
• Adding motion when selection options change.
• Ensuring they work correctly on as many devices and browsers as possible.
• Manually fine-tuning all of the above.

You might think that CSS libraries like Tailwind CSS would handle this nicely, right?

While that's true for some, most CSS platforms actually offer designs that are even simpler than plain HTML. This is because companies expect to build out their own customizations.

However, implementation often proves more difficult than expected, leading to significant labor costs. So, it's desirable to have options like "apply this first and replace it later."

Therefore, how about a JavaScript library that designs form elements nicely when you load JavaScript via a CDN?

Implementation Image

• Decide what to build.
• Determine the basic design.
• Implement the basic design in CSS.
• Debug until it works flawlessly in all environments.
• Write JavaScript to apply the CSS (for Vanilla, jQuery, React, Vue, etc.).
• Debug again until it works flawlessly in all environments.
• Develop parameters that can be passed during invocation (e.g., to switch colors, sizes, shapes) by embedding them in the query, etc.
• Deploy to CDN (upload to a platform, or self-distribute using Cloudflare, etc.)