Pimp My IDE / garage dispatch
Back to garage
October 1, 2026 | semantic HTML / classless CSS / interface craft

If the page only works after makeup, check the bones.

CSS Bed puts the same element demo under many classless themes. That makes it more than a style catalog. It is a fast way to expose weak headings, unlabeled controls, vague links, and markup that depended on a component class to make sense.

Strip the page to native HTML. Read it in order. Run the keyboard route. Then switch the paint back on without changing the meaning.

One page. Many paint jobs.

CSS Bed is a live collection of classless CSS themes. Its demo page keeps the element mix steady while visitors switch among HTML only, Sakura, Pico, Water.css, Tufte, and other themes. The project describes these themes as small starting points that let authors write ordinary HTML instead of learning a class vocabulary.[1]

The useful part is the fixed specimen. A theme can change type, spacing, color, borders, and form treatment while the document structure stays put. That gives interface work a cheap stress test before a design system adds wrappers and utility classes.

Classless CSS does not remove design work. It reveals which parts of the page still work before the design work begins.

HTML carries purpose.

MDN defines semantics as the purpose or role of an HTML element rather than its appearance. A heading means a heading. A button means an action. A navigation region means a set of navigation links.[2]

This distinction matters in an IDE panel or agent console. A clickable div can look like a button after CSS. The browser does not give it button keyboard behavior just because it looks right. A text label placed near an input can look connected while remaining unnamed to software.

Native controls start with working behavior.

The W3C ARIA Authoring Practices Guide warns that ARIA roles do not make browsers supply keyboard behavior or styling. Its rule is blunt. No ARIA is better than bad ARIA. Custom widgets can be accessible, but the author must implement and test the expected behavior.[3]

Use a native button, link, input, select, details element, or dialog when it fits the job. Add ARIA when it supplies missing meaning. Do not use it to cover a control that should have been native HTML.

Run the naked-page check.

Turn off authored CSS or open a plain specimen. Read the heading order. Tab through every control. Check that links explain their destination. Confirm that labels activate their inputs. Submit forms and read the errors. Narrow the viewport. Zoom the page. Then restore the theme and repeat the same route.

This is focused validation, not an accessibility certification. A plain page can still have poor wording, invalid markup, broken focus order, missing alternatives, and unusable behavior. The check finds structural problems that paint often hides.

Interactive makeover / classless paint booth

Switch the paint. Keep the markup.

Traditional purpose replaced: separate static theme screenshots and a buried QA checklist. Better version: one native selector repaints the same semantic specimen while inspection checks build a copyable review card.

Choose a coat

The specimen keeps the same navigation, heading, paragraph, labeled input, button, and quotation in every state.

Paint selector
Inspection sections to include
Live specimen

Same bones

0 of 4 sections selected

A useful page starts under the paint.

This paragraph keeps its place, purpose, and reading order while the theme changes around it.

The visual system should help the document speak. It should not supply the document's missing meaning.

Inspection card

The completed selector state means every review section is requested. It does not mean the page passed.

Sources read

Source log and evidence boundary
  1. CSS Bed and its source repository, read October 1, 2026. The live site supplies the fixed element demo, theme catalog, stated small-size and no-class goals, and installation route. The repository describes the project as a test bed for static pages without classes.
  2. MDN, "Semantics", read October 1, 2026. This supplies the distinction between an element's purpose or role and its appearance.
  3. W3C Web Accessibility Initiative, "Read Me First", read October 1, 2026. This supports the warning that ARIA roles do not provide native keyboard behavior or styling and that incorrect ARIA can misrepresent an interface.
  4. Hacker News discussion for CSS Bed, item ID verified through the Hacker News API and read October 1, 2026. This is the current discovery route, not technical authority.

Evidence boundary. The paint booth is an original teaching component. Its themes are small local demonstrations, not copies of the listed CSS Bed themes. Switching themes does not run an HTML validator, accessibility tree inspection, screen reader test, contrast audit, or keyboard test. The generated card requests those checks and keeps their results marked as not run.