Concrete.css

Original Article ↗ Hacker News Discussion ↗

A tiny “classless” stylesheet called Concrete.css is prompting renewed interest in minimalist, drop‑in CSS that makes plain HTML look clean without custom classes or build steps. Commenters compare it to alternatives like Water.css, Pico, Milligram, and others, praising this approach for prototypes and small projects while raising concerns about accessibility, overly minimal controls, and strong black‑on‑white or white‑on‑black contrast. The thread highlights a broader desire for better browser defaults and semantic HTML, alongside practical debates over dark mode, disabled states, link styling, and how opinionated a zero‑config stylesheet should be.

Overall reception

  • Many find Concrete.css refreshing: tiny (<1kb minzipped), simple, and good for quick prototypes, hackathons, and “no build step” projects.
  • Several like its brutalist / retro look; others say it’s too minimal to use as‑is for real apps.
  • Some wish browser default styles had been more like this, imagining a simpler web if “no CSS” sites looked better by default.

Comparisons to other classless CSS options

  • Multiple alternatives are praised: water.css, Pico (especially upcoming v2), Simple.css, classless.de, MVP.css, milligram, skeleton, neat.css, Marx, Tufte CSS.
  • Lists of “drop‑in/classless CSS” collections are linked for exploration.
  • Some say Concrete feels like an even more minimal Pico; others prefer Pico or similar as more practical defaults.

Layout and responsiveness

  • Desire expressed for Pico with Bootstrap’s grid; rebuttal that modern CSS Grid plus media queries can replace grid frameworks and be more flexible.
  • Example code shows how to switch grid layouts at a breakpoint.

Accessibility and usability concerns

  • Disabled buttons currently stand out too much; suggestions include reduced opacity, dashed/dotted borders, strike‑through.
  • Need for clear hover/focus states on buttons is highlighted.
  • Lack of a dropdown arrow on <select> is called out as an accessibility and usability problem.
  • Some criticize identical styling for links vs underlined text; others argue alternative link cues can work.
  • Using <a><button>…</button></a> for button‑like links is questioned as semantically awkward, but seen as a classless workaround.

Dark mode, contrast, and visual comfort

  • Issues in dark mode: dropdown arrow visibility, Dark Reader conflicts, high contrast (#fff on near‑black) causing eye strain for some.
  • Others prefer very high contrast, especially on certain displays or in bright rooms.
  • Discussion notes that dark/light preferences and astigmatism vary widely; configurability and user choice are emphasized.

Implementation details and terminology

  • Setting html { font-size: 62.5% } is criticized as brittle and poorly interacting with user font settings; recommendation is to leave base size alone and adjust rems.
  • Adding default margins and large section paddings is questioned as bad practice for a generic base style.
  • Debate over calling it a “framework” vs “stylesheet”; some suggest “boilerplate” or accept “CSS stylesheet” as standard.
  • Concern that migrating away from classless CSS may require restyling everything; others note swapping to another classless framework is easy.