Semantic HTML and CSS — No JavaScript, No Dependencies, No Build
Overview
Static website architecture builds content-focused sites purely from web standards: semantic HTML for
structure and modern CSS for presentation and interactivity. There is no JavaScript, no external
dependency, and no build system — the files you write are exactly the files you ship. This approach
suits documentation, marketing sites, portfolios, and any project where no client-side state is
required.
The BCE pattern maps naturally onto static sites: semantic HTML pages act as Boundaries — the
user-facing entry points; CSS-only interactive patterns take the role of Controls — behavior without
scripts; and content together with design tokens forms the Entity layer — the data and the design
system the pages render. Verification happens from the outside, by driving a real browser against the
rendered pages.
Business Components
Content areas are organized as business component directories named after their domain topics (e.g.,
workshops, trainings, articles, about). Each component contains its own pages, images, and a
checks.md manifest describing the observable behavior of its pages.
The site root holds the entry page and shared assets:
index.html, css/style.css, images/, fonts/, and
icons/. For small sites a flat structure — HTML files, a single stylesheet, and an
images directory — is sufficient.
Boundary
Semantic HTML pages serving as the user-facing entry points. Boundaries structure content with
landmarks, a strict heading hierarchy, labeled forms, skip links, and alternative text — accessible by
construction, indexable by default, and rendered identically to what was authored.
Purpose: Present content and structure to users, crawlers, and assistive technology
Implementation: Plain .html files with semantic elements
Heading Hierarchy: h1 → h2 → h3 without skipping levels
Accessibility: Labels on every form input, alt text on every image, skip link first in tab order
Navigation: <a> elements for navigation — never buttons
Metadata: Canonical URLs, Open Graph tags, schema.org structured data
Architecture Role: The only user-facing layer — everything visible enters here
Responsive: Mobile-first layout adapting through min-width breakpoints
Control
CSS-only interactive patterns implementing behavior without a single line of JavaScript. Controls turn
native HTML elements and CSS pseudo-classes into accordions, modals, tabs, dropdowns, and mobile
menus — interactivity that works in every browser, with no script to load, parse, or fail.
Purpose: Provide interactivity through native elements and CSS state
Implementation: HTML state carriers styled with CSS pseudo-classes
Accordion: <details> and <summary>
Modal: :target pseudo-class with anchor links
Tabs: Hidden radio buttons with :checked and sibling selectors
Dropdown Menu: :hover combined with :focus-within
Mobile Hamburger: Hidden checkbox with :checked and sibling selectors
Form Styling: appearance: none to customize native controls
Keyboard Support: Native elements stay reachable and operable by keyboard
Motion Respect: Animations neutralized under prefers-reduced-motion: reduce
Architecture Role: Behavior layer — state changes without scripts
Zero Failure Modes: No script loading, parsing, or runtime errors possible
Entity
Content and design tokens representing the site's data and design system. Custom properties on
:root define colors, spacing, typography, and radii as the single source of truth;
component and page rules reference tokens, never raw values. The design intent can be captured in a
DESIGN.md at the project root.
Purpose: Hold the site's content and its design system
Implementation: CSS custom properties on :root plus the content itself
Design Tokens: Colors, spacing scale, typography, radii as custom properties
Token Discipline: Rules reference tokens — never raw hex values or magic numbers
DESIGN.md: Optional root-level document declaring palette, typography, and reasoning
Reset Baseline: box-sizing: border-box and a system font stack on every project
Theming: prefers-color-scheme: dark restyles via token overrides
Fluid Typography: clamp() scales type between viewports
Logical Properties: margin-block, padding-inline, inline-size for writing-mode resilience
Architecture Role: Data layer — what the boundaries render and the controls style
Implementation Characteristics
Constraints
No JavaScript: No <script> tags, inline event handlers, or .js files
No External Dependencies: No frameworks, libraries, CDNs, or package managers
No Build Systems: No transpilation, bundling, Sass, Less, or Tailwind
No Inline Styles: All CSS lives in separate .css files
Baseline Compliance: Widely Available CSS passes; Newly Available features require @supports with a fallback; Limited-availability features are out
Verification Loop
Rendered Page as Oracle: A page is never declared done from reading its source
Browser-Driven: Chrome DevTools MCP drives a real browser against every page
Console Checks: No errors, no failed requests — proving the no-JavaScript constraint holds
Accessibility Snapshot: One main landmark, intact heading hierarchy, labels, alt text, skip link
Responsive Checks: Verified at 375×667 and 1280×800 viewports
Preference Emulation: Dark color scheme and reduced motion are exercised, not assumed
Lighthouse Gates: Accessibility = 100, best practices ≥ 90, SEO ≥ 90
All Green or Red: Every check on every page passes — there is no "mostly green"
checks.md
Site-Specific Checks: One labeled line per check at the site root
Mechanically Executable: Exact URL, viewport, and expected observation
Observations, Not Judgments: "Snapshot contains button 'Menu'" — never "menu looks right"
Stable Labels: Identifiers are never renumbered — retired instead of reused
Spec Traceability: With spec-driven development the label is the requirement id
Development Experience
Ship What You Write: HTML and CSS deploy directly — no artifacts, no pipeline
Zero-Dependency Server: java zws <site-root> serves the site on localhost:3000
Instant Feedback: Save and reload — caching disabled during development
Longevity: Web standards do not churn — the site outlives framework cycles
Performance by Default: Nothing to hydrate, bundle, or execute