• 0 Posts
  • 6 Comments
Joined 2 年前
cake
Cake day: 2023年6月17日

help-circle


  • great example of a code smell, too! JS needs to know about styles?

    shouldn’t be styling in JS! make it asd/remove a class instead

    need to know whether to load content or not? save it to local/session storage! don’t make a server call if it already exists!

    need to enhance your tracking? include it with your payloads as it happens, you’re asking for race conditions

    client side disabled local caching? great! working as intended. make a graceful fall-back

    everything here is a short term problem that belies long term tech debt. tight coupling sounds sexy, but SOLID principals and The Law of Demeter exist to stop our codebases from rotting if we can’t change it, then it’s not software it’s hardware




  • Tokenise your styles with variable layers. Eg: put a class on your body tag for each theme, eg: dark-mode, high-contrast

    Then define your components by abstract style variables, eg: button-color, heading-weight,

    Then define the style variables for each theme:

    body { –button-color: green; }

    body.dark-mode { –button-color: blue; }

    button { backgroud: var(–button-color); }

    Then all you need to do is a simple JS function to set the appropriate theme class on your document body!

    This way your components are compliant to your style guide, without needing to know the implementation details of your themeing Very SRP, much Demeter, such OCP

    Apologies for psudocode, LMK if you have any furthers :)