Skip to main content

Web Coding Standards

Key Rules​

  1. No inline JS/CSS - All logic in shared modules, CSS in shared/styles/common.css
  2. IIFE module pattern - Every shared module wraps in IIFE, attaches to window
  3. Use StatuxUI for HTML - Don't write repeated HTML patterns by hand

Module Pattern​

(function() {
  'use strict';

  // Private variables
  var cache = {};

  // Public API
  window.StatuxModule = {
    doSomething: function() { ... },
    doSomethingElse: function() { ... }
  };
})();

Script Load Order​

<!-- 1. Shared CSS -->
<link rel="stylesheet" href="/shared/styles/common.css">
<!-- 2. Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 3. Shared JS (order matters) -->
<script src="/shared/js/config.js"></script>
<script src="/shared/js/tailwind-config.js"></script>
<script src="/shared/js/utils.js"></script>
<script src="/shared/js/auth.js"></script>
<script src="/shared/js/api-client.js"></script>
<script src="/shared/js/ui.js"></script>
<!-- 4. Product-specific -->
<script src="/js/dashboard.js"></script>

See statux-web/designdoc.md for complete guidelines.