SmartDate should use classes instead of setting styles

Can you provide an example or two of where the current approach isn't sufficiently flexible?

Hi @mandclu, thanks for chiming in.

Some users have asked if I could try to have this new module → I just created work with SmartDate.

And I had some problem displaying the reset button with the way the date and time were hidden/shown in smartdate (the reverse flex part in particular).

I think that using classes instead of manual style toggling on element is also good practice, it could be something interesting to implement in SmartDate.

Here is what says Chat GPT on the subject:

Using classes to toggle styles is generally considered better practice in HTML for several reasons:

• Separation of Concerns: Classes keep the HTML, CSS, and JavaScript separate, making the code easier to read, understand, and maintain. Styles defined in CSS are separate from the HTML structure and JavaScript behavior, improving code organization.
• Consistency and Reusability: If you need to apply the same style in multiple places, classes allow you to apply the style consistently across elements by simply toggling a class. Directly setting inline styles requires repetitive code and becomes difficult to manage.
• Efficiency: Classes leverage the CSS cascade and browser optimization for faster rendering. Inline styles, on the other hand, override CSS rules, which can impact performance, especially if you’re making many changes.
• Simpler JavaScript: Adding or removing classes with JavaScript (e.g., element.classList.toggle('class-name')) is simpler and usually more readable than modifying inline styles individually. It also reduces potential errors with inline styles needing exact values.
• Easier Maintenance: If you decide to adjust the style later, modifying a single CSS class updates all elements with that class, while inline styles require individual adjustments or complex JavaScript to change them.

However, there are cases where inline styles might be useful, such as dynamically setting properties that are unique to a single element (like height or width based on calculated values).

For most use cases, though, toggling classes is preferable.

My module with the patch:

And without: