/ Update
15 min
No categories available
No tags available
无类名 css 备选清单
Without further ado
val views
|
comments
无类名 css 备选清单和其他
按 Stars 排序（约略值）：
| 框架 | Stars | 大小 | 特色 |
|---|---|---|---|
| Pico CSS | ~13.5k | ~10KB | 最完整、暗色模式、CSS变量 |
| Milligram | ~13.1k | ~2KB | 极简栅格、超轻量 |
| Water.css | ~8.2k | ~2KB | 即插即用、无障碍 |
| MVP.css | ~5.0k | ~3.5KB | MVP落地、博客风 |
| Simple.css | ~4.2k | ~4KB | 干净、自动暗色 |
| Sakura | ~3.7k | ~3KB | 粉色系、阅读体验 |
| new.css | ~2.4k | ~4.8KB | 现代感、系统字体 |
| matcha.css | ~2.3k | ~8KB | 高度可定制、变量驱动 |
| concrete.css | ~1.1k | ~1KB | 超轻量工业风 |
| magick.css | ~900+ | ~4KB | LaTeX学术排版风格 |
| 赫蹏 Heti | ~800+ | ~8KB | 中文排版专用 |
注：Stars 数为 2025 年初统计，实际请以 GitHub 为准。页面通过 CDN 加载各框架，网络不稳定时部分框架可能加载较慢。
DEMO
AI 生成的演示 DEMO classless-css-demo.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>原生标签 CSS 框架演示 · Classless CSS Showcase</title>
<!-- === CSS 框架 CDN === -->
<!-- 1. Pico CSS -->
<link id="css-pico" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" disabled />
<!-- 2. Milligram -->
<link id="css-milligram" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css" disabled />
<!-- 3. Water.css -->
<link id="css-water" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" disabled />
<!-- 4. MVP.css -->
<link id="css-mvp" rel="stylesheet" href="https://unpkg.com/mvp.css" disabled />
<!-- 5. Simple.css -->
<link id="css-simple" rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" disabled />
<!-- 6. new.css -->
<link id="css-new" rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" disabled />
<link id="css-new2" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css" disabled />
<!-- 7. matcha.css -->
<link id="css-matcha" rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css" disabled />
<!-- 8. concrete.css -->
<link id="css-concrete" rel="stylesheet" href="https://unpkg.com/concrete.css@2.1.1/concrete.css" disabled />
<!-- 9. magick.css -->
<link id="css-magick" rel="stylesheet" href="https://unpkg.com/magick.css" disabled />
<!-- 10. 赫蹏 -->
<link id="css-heti" rel="stylesheet" href="https://unpkg.com/heti/umd/heti.min.css" disabled />
<!-- 11. Sakura (替代 SimpleCSS 重复) -->
<link id="css-sakura" rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" disabled />
<style>
/* ===== 控制面板样式 (始终生效，不被框架覆盖) ===== */
#css-switcher {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
background: #1a1a2a;
color: #fff;
padding: 0.55rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.4);
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 0.78rem;
}
#css-switcher span.label {
font-weight: 700;
letter-spacing: .05em;
color: #a8b0c8;
white-space: nowrap;
margin-right: 0.3rem;
}
.sw-btn {
cursor: pointer;
border: 1.5px solid #3a4060;
border-radius: 6px;
padding: 0.28rem 0.7rem;
background: transparent;
color: #c8d0e8;
font-size: 0.76rem;
transition: all .2s;
white-space: nowrap;
}
.sw-btn:hover { background: #2a2d4a; border-color: #6070c0; }
.sw-btn.active { background: #4455cc; border-color: #7080ff; color: #fff; font-weight: 700; }
/* 当应用了 heti 时需要 article 包裹 */
#page-body { margin-top: 54px; padding: 1.5rem; max-width: 860px; margin-left: auto; margin-right: auto; }
/* 框架信息卡片 */
#fw-info {
border: 1px solid #c0c8e0;
border-radius: 10px;
background: #f4f6ff;
padding: 1rem 1.4rem;
margin-bottom: 1.5rem;
font-size: 0.88rem;
line-height: 1.7;
}
body.dark-bg #fw-info { background: #1e2030; border-color: #3a4060; color: #c8d0e8; }
#fw-info h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
#fw-info .tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
#fw-info .tag {
background: #4455cc22; color: #3344bb;
border: 1px solid #4455cc55;
border-radius: 20px; padding: .15rem .6rem; font-size: .75rem; font-weight: 600;
}
#fw-info a { color: #4455cc; text-decoration: none; }
#fw-info a:hover { text-decoration: underline; }
#fw-info .meta { color: #667; font-size: .82rem; margin-top: .4rem; }
#fw-info .stars { color: #f59e0b; font-weight: 700; }
/* 无框架时的默认样式 */
body.no-fw { font-family: Georgia, serif; background: #faf8f4; color: #333; }
body.no-fw #page-body { max-width: 820px; }
/* 让 heti 生效需要包裹类 */
.heti { }
</style>
</head>
<body class="no-fw">
<!-- ===== 控制面板 ===== -->
<div id="css-switcher">
<span class="label">🎨 切换框架：</span>
<button class="sw-btn active" data-fw="none">无框架</button>
<button class="sw-btn" data-fw="pico">Pico CSS ⭐13.5k</button>
<button class="sw-btn" data-fw="milligram">Milligram ⭐13.1k</button>
<button class="sw-btn" data-fw="water">Water.css ⭐8.2k</button>
<button class="sw-btn" data-fw="mvp">MVP.css ⭐5.0k</button>
<button class="sw-btn" data-fw="simple">Simple.css ⭐4.2k</button>
<button class="sw-btn" data-fw="new">new.css ⭐2.4k</button>
<button class="sw-btn" data-fw="matcha">matcha.css ⭐2.3k</button>
<button class="sw-btn" data-fw="concrete">concrete.css ⭐1.1k</button>
<button class="sw-btn" data-fw="magick">magick.css ⭐900+</button>
<button class="sw-btn" data-fw="heti">赫蹏 ⭐800+</button>
<button class="sw-btn" data-fw="sakura">Sakura ⭐3.7k</button>
</div>
<!-- ===== 框架信息卡片 ===== -->
<div id="page-body">
<div id="fw-info">
<h2 id="fw-name">🚫 无框架（浏览器默认样式）</h2>
<p id="fw-desc">当前未加载任何 CSS 框架，展示浏览器原生 HTML 元素的裸样式。点击上方按钮切换体验各个框架的效果。</p>
<div class="meta">
<span>📦 大小：— | </span>
<span>🌐 官网：— | </span>
<span class="stars">⭐ Stars：—</span>
</div>
<div id="fw-tags" class="tags"></div>
</div>
<!-- ===== 演示内容区 ===== -->
<article class="heti">
<h1>原生 HTML 元素展示 · Classless CSS Demo</h1>
<p>本页展示了常见 HTML 语义标签在不同无类（Classless）CSS 框架下的渲染效果。<strong>无需任何 CSS 类名</strong>，纯语义 HTML 即可获得美观样式。</p>
<hr />
<h2>📝 文字排版</h2>
<p>这是一段正文段落。好的排版框架会为 <strong>粗体</strong>、<em>斜体</em>、<u>下划线</u>、<del>删除线</del>、<mark>高亮文本</mark> 以及 <code>行内代码</code> 提供美观的默认样式。</p>
<p>超链接示例：<a href="#">点击这里</a> · <a href="https://github.com" target="_blank">GitHub</a></p>
<blockquote>
<p>「优秀的 CSS 框架就像好的排版设计——当你注意不到它时，它做得最好。」</p>
<footer>— Robert Bringhurst，《排版风格的要素》</footer>
</blockquote>
<h2>🔢 标题层级</h2>
<h1>一级标题 H1</h1>
<h2>二级标题 H2</h2>
<h3>三级标题 H3</h3>
<h4>四级标题 H4</h4>
<h5>五级标题 H5</h5>
<h6>六级标题 H6</h6>
<hr />
<h2>📋 列表</h2>
<h3>无序列表</h3>
<ul>
<li>Classless CSS 框架</li>
<li>无需添加任何 class 名称
<ul>
<li>纯语义 HTML</li>
<li>快速原型开发</li>
</ul>
</li>
<li>适合文档、博客、MVP</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>引入一行 CSS CDN 链接</li>
<li>编写语义化 HTML</li>
<li>获得美观默认样式</li>
<li>按需覆盖 CSS 变量</li>
</ol>
<h3>定义列表</h3>
<dl>
<dt>Classless CSS</dt>
<dd>不需要在 HTML 中添加 class 属性即可美化页面的 CSS 框架。</dd>
<dt>语义化 HTML</dt>
<dd>使用具有明确含义的 HTML 标签（如 article、section、nav）来组织内容。</dd>
</dl>
<hr />
<h2>📊 表格</h2>
<table>
<thead>
<tr>
<th>框架名称</th>
<th>大小</th>
<th>Stars</th>
<th>特色</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pico CSS</td>
<td>~10KB</td>
<td>⭐ 13.5k</td>
<td>暗色模式、CSS 变量、完整组件</td>
</tr>
<tr>
<td>Milligram</td>
<td>~2KB</td>
<td>⭐ 13.1k</td>
<td>极简栅格、轻量、快速</td>
</tr>
<tr>
<td>Water.css</td>
<td>~2KB</td>
<td>⭐ 8.2k</td>
<td>浅/深色主题、无障碍友好</td>
</tr>
<tr>
<td>MVP.css</td>
<td>~3.5KB</td>
<td>⭐ 5.0k</td>
<td>MVP 快速落地、博客风格</td>
</tr>
<tr>
<td>Simple.css</td>
<td>~4KB</td>
<td>⭐ 4.2k</td>
<td>干净、自动暗色、响应式</td>
</tr>
<tr>
<td>Sakura</td>
<td>~3KB</td>
<td>⭐ 3.7k</td>
<td>柔和粉色风格、阅读体验</td>
</tr>
<tr>
<td>new.css</td>
<td>~4.8KB</td>
<td>⭐ 2.4k</td>
<td>现代、系统字体、极简</td>
</tr>
<tr>
<td>matcha.css</td>
<td>~8KB</td>
<td>⭐ 2.3k</td>
<td>Drop-in、高度可定制、变量驱动</td>
</tr>
<tr>
<td>concrete.css</td>
<td>~1KB</td>
<td>⭐ 1.1k</td>
<td>超轻量、工业风格</td>
</tr>
<tr>
<td>magick.css</td>
<td>~4KB</td>
<td>⭐ 900+</td>
<td>LaTeX 风格、学术排版</td>
</tr>
<tr>
<td>赫蹏 Heti</td>
<td>~8KB</td>
<td>⭐ 800+</td>
<td>中文排版专用、汉字间距优化</td>
</tr>
</tbody>
</table>
<hr />
<h2>📝 表单元素</h2>
<form onsubmit="return false;">
<fieldset>
<legend>用户信息</legend>
<label for="demo-name">姓名</label>
<input type="text" id="demo-name" placeholder="请输入姓名" />
<label for="demo-email">邮箱</label>
<input type="email" id="demo-email" placeholder="example@email.com" />
<label for="demo-pwd">密码</label>
<input type="password" id="demo-pwd" placeholder="至少8位" />
<label for="demo-range">进度 (0-100)</label>
<input type="range" id="demo-range" min="0" max="100" value="42" />
<label for="demo-select">选择框架类型</label>
<select id="demo-select">
<option>Classless（无类）</option>
<option>Class-light（轻类）</option>
<option>Utility-first（工具类）</option>
</select>
<label for="demo-textarea">备注</label>
<textarea id="demo-textarea" rows="3" placeholder="请输入备注..."></textarea>
<label>
<input type="checkbox" /> 同意服务条款
</label>
<label>
<input type="radio" name="r1" /> 选项 A
</label>
<label>
<input type="radio" name="r1" /> 选项 B
</label>
<button type="submit">提交</button>
<button type="reset">重置</button>
</fieldset>
</form>
<hr />
<h2>💻 代码块</h2>
<pre><code><!-- 一行引入，立即美化 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">
/* 用 CSS 变量轻松定制 */
:root {
--pico-primary: #4CAF50;
--pico-font-size: 18px;
}</code></pre>
<hr />
<h2>🖼️ 媒体与其他元素</h2>
<figure>
<img src="https://picsum.photos/seed/cssdemo/700/300" alt="示例图片" style="width:100%;border-radius:4px;" />
<figcaption>图1：随机示例图片（来自 Lorem Picsum）</figcaption>
</figure>
<details>
<summary>展开查看更多信息</summary>
<p>这是折叠内容区域。<code><details></code> 和 <code><summary></code> 是原生 HTML 折叠组件，无需 JavaScript。</p>
</details>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr> ·
<kbd>Ctrl</kbd> + <kbd>C</kbd> ·
<sup>上标</sup> ·
<sub>下标</sub> ·
<time datetime="2025-01-01">2025年1月1日</time>
</p>
<hr />
<h2>⚠️ 提示 / 引用</h2>
<blockquote>
注意：不同框架对 <code><blockquote></code>、<code><details></code> 等元素的样式支持程度不同。切换框架时部分元素可能无明显变化，这是正常现象。
</blockquote>
<p><small>本演示页仅通过 CDN 加载各框架，加载速度受网络环境影响。所有 Star 数据为 2025 年初统计，实际数量请以 GitHub 为准。</small></p>
</article>
</div><!-- /page-body -->
<!-- ===== 框架数据 & 切换逻辑 ===== -->
<script>
const frameworks = {
none: {
name: "🚫 无框架（浏览器默认样式）",
desc: "当前未加载任何 CSS 框架，展示浏览器原生 HTML 元素的裸样式。点击上方按钮切换体验各个框架的效果。",
size: "—", stars: "—", starsNum: 0,
github: "", website: "", tags: [],
ids: []
},
pico: {
name: "🎨 Pico CSS",
desc: "Minimal CSS Framework for semantic HTML。为所有原生 HTML 元素提供优雅样式，内置亮/暗主题自动切换，支持大量 CSS 变量自定义。同时提供有类和无类两种版本，是功能最完整的 Classless 框架之一。",
size: "~10 KB (gzip)", stars: "⭐ ~13,500", starsNum: 13500,
github: "https://github.com/picocss/pico",
website: "https://picocss.com",
tags: ["暗色模式", "CSS变量", "响应式", "表单美化", "SCSS"],
scope: "SaaS 产品、营销页面、文档网站、原型开发",
ids: ["css-pico"]
},
milligram: {
name: "⚡ Milligram",
desc: "A minimalist CSS framework。仅 2KB，提供极简的栅格系统、按钮、表单和排版样式。不追求花哨效果，只求让页面快速看起来整洁。基于 Flexbox，风格克制优雅。",
size: "~2 KB (gzip)", stars: "⭐ ~13,100", starsNum: 13100,
github: "https://github.com/milligram/milligram",
website: "https://milligram.io",
tags: ["超轻量", "Flexbox栅格", "极简主义", "快速原型"],
scope: "小型项目、个人页面、快速 MVP",
ids: ["css-milligram"]
},
water: {
name: "💧 Water.css",
desc: "Just add water — 一个即插即用的 CSS 美化库。支持亮色/暗色/自动三种主题，注重无障碍访问（WCAG 2.1），对所有 HTML 元素都有细致的默认样式，使用 CSS 自定义属性方便覆盖。",
size: "~2 KB (gzip)", stars: "⭐ ~8,200", starsNum: 8200,
github: "https://github.com/kognise/water.css",
website: "https://watercss.kognise.dev",
tags: ["暗色模式", "无障碍", "即插即用", "CSS变量"],
scope: "内部工具、文档、小型网站",
ids: ["css-water"]
},
mvp: {
name: "🚀 MVP.css",
desc: "Minimalist stylesheet for HTML elements，用于快速让 MVP/原型页面看起来像产品。极其适合开源项目首页、Hackathon 作品展示。排版偏博客风格，中英文兼容良好。",
size: "~3.5 KB (gzip)", stars: "⭐ ~5,000", starsNum: 5000,
github: "https://github.com/andybrewer/mvp",
website: "https://andybrewer.github.io/mvp",
tags: ["博客风格", "MVP开发", "开源项目首页", "响应式"],
scope: "开源项目主页、Hackathon、README 风格页面",
ids: ["css-mvp"]
},
simple: {
name: "✨ Simple.css",
desc: "A classless CSS framework that makes semantic HTML look good。排版干净清爽，自动响应系统暗色模式，通过 CSS 变量轻松调色。注重内容可读性，适合技术博客和文档。",
size: "~4 KB (gzip)", stars: "⭐ ~4,200", starsNum: 4200,
github: "https://github.com/kevquirk/simple.css",
website: "https://simplecss.org",
tags: ["暗色模式自动", "博客", "文档", "排版优先"],
scope: "个人博客、技术文档、内容型网站",
ids: ["css-simple"]
},
sakura: {
name: "🌸 Sakura",
desc: "Minimal classless CSS framework/theme。以柔和的粉色调和舒适间距为特色，营造温暖的阅读体验。多种主题可选（sakura、sakura-dark、sakura-ink 等），SCSS 构建，轻量优雅。",
size: "~3 KB (gzip)", stars: "⭐ ~3,700", starsNum: 3700,
github: "https://github.com/oxalorg/sakura",
website: "https://oxal.org/projects/sakura",
tags: ["多主题", "阅读体验", "SCSS", "粉色系"],
scope: "个人博客、创意网站、阅读型页面",
ids: ["css-sakura"]
},
new: {
name: "🆕 new.css",
desc: "A classless CSS framework to write modern websites using only HTML。使用系统原生字体，现代简洁风格，极低开销。无需任何配置，引入即用，代码风格偏向当代 Apple/Material 美学。",
size: "~4.8 KB (gzip)", stars: "⭐ ~2,400", starsNum: 2400,
github: "https://github.com/xz/new.css",
website: "https://newcss.net",
tags: ["系统字体", "现代风格", "零配置", "暗色模式"],
scope: "现代感网站、个人主页、快速部署",
ids: ["css-new", "css-new2"]
},
matcha: {
name: "🍵 matcha.css",
desc: "Drop-in semantic styling library in pure CSS。高度可定制，通过 CSS 变量驱动几乎所有样式，支持多主题切换。是目前功能最全、可定制程度最高的 Classless 框架之一，活跃维护中。",
size: "~8 KB (gzip)", stars: "⭐ ~2,300", starsNum: 2300,
github: "https://github.com/lowlighter/matcha",
website: "https://matcha.mizu.sh",
tags: ["高度可定制", "CSS变量驱动", "多主题", "原型开发"],
scope: "Web 应用原型、可定制文档站、全栈项目",
ids: ["css-matcha"]
},
concrete: {
name: "🧱 concrete.css",
desc: "A simple, accessible CSS framework。体积极小（约 1KB），工业感极简风格，仅专注于最基本的可读性和可访问性改善，不做多余装饰。适合追求极致轻量的场景。",
size: "~1 KB (gzip)", stars: "⭐ ~1,100", starsNum: 1100,
github: "https://github.com/louismerlin/concrete.css",
website: "https://concrete.style",
tags: ["超轻量1KB", "无障碍", "工业风", "极简"],
scope: "纯文本页面、嵌入式文档、极端性能场景",
ids: ["css-concrete"]
},
magick: {
name: "✦ magick.css",
desc: "Minimalist, (mostly) classless CSS library designed to be used with simple HTML and Markdown documents。以 LaTeX 学术排版风格为灵感，模拟纸张质感和印刷排版美学。适合学术写作、技术报告和内容密集型文档。",
size: "~4 KB (gzip)", stars: "⭐ ~900+", starsNum: 900,
github: "https://github.com/wintermute-cell/magick.css",
website: "https://css.winterveil.net",
tags: ["LaTeX风格", "学术排版", "Markdown友好", "纸张质感"],
scope: "学术文档、技术报告、Markdown 渲染页面",
ids: ["css-magick"]
},
heti: {
name: "赫蹏 Heti",
desc: "专为中文内容设计的排版样式增强库。名称「赫蹏」取自古代书写载体，专注解决中文排版痛点：汉字间距、标点挤压、中西文混排间距、竖排文字支持等，是目前最成熟的中文 Web 排版方案。",
size: "~8 KB (gzip)", stars: "⭐ ~800+", starsNum: 800,
github: "https://github.com/sivan/heti",
website: "https://sivan.github.io/heti",
tags: ["中文排版专用", "标点优化", "竖排支持", "中西混排"],
scope: "中文博客、新闻资讯、电子书、知识库",
ids: ["css-heti"]
}
};
// 所有框架的 link id 列表
const allIds = [
"css-pico","css-milligram","css-water","css-mvp","css-simple",
"css-new","css-new2","css-matcha","css-concrete","css-magick","css-heti","css-sakura"
];
function switchFw(key) {
// 禁用所有 CSS
allIds.forEach(id => {
const el = document.getElementById(id);
if (el) el.disabled = true;
});
// 移除 body 类
document.body.className = "";
const fw = frameworks[key];
if (!fw) return;
// 启用对应 CSS
fw.ids.forEach(id => {
const el = document.getElementById(id);
if (el) el.disabled = false;
});
// 特殊 body 处理
if (key === 'water') document.body.setAttribute('data-theme', 'auto');
else document.body.removeAttribute('data-theme');
if (key === 'none') document.body.className = 'no-fw';
// 更新信息卡片
document.getElementById('fw-name').textContent = fw.name;
document.getElementById('fw-desc').textContent = fw.desc;
const meta = document.querySelector('#fw-info .meta');
meta.innerHTML = `
<span>📦 大小：${fw.size} | </span>
<span>🌐 官网：${fw.website ? `<a href="${fw.website}" target="_blank">${fw.website}</a>` : '—'} | </span>
<span>💻 GitHub：${fw.github ? `<a href="${fw.github}" target="_blank">${fw.github}</a>` : '—'} | </span>
<span class="stars">⭐ Stars：${fw.stars}</span>
${fw.scope ? `<br><span>🎯 适用：${fw.scope}</span>` : ''}
`;
const tagsEl = document.getElementById('fw-tags');
tagsEl.innerHTML = fw.tags.map(t => `<span class="tag">${t}</span>`).join('');
// 按钮高亮
document.querySelectorAll('.sw-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.fw === key);
});
}
document.querySelectorAll('.sw-btn').forEach(btn => {
btn.addEventListener('click', () => switchFw(btn.dataset.fw));
});
// 默认显示无框架状态
switchFw('none');
</script>
</body>
</html>