CSS框架Milligram实战_极简主义下的前端开发快速原型-css教程-PHP中文网

Milligram 的 reset.css 重置表单元素样式导致“消失”，需显式添加 .input 等类；栅格需严格遵循 .row/.column 结构；主题变量不全量生效，按钮默认色需手动覆盖；搭配 Tailwind 易造成冗余。

css框架milligram实战_极简主义下的前端开发快速原型

Milligram 的 `reset.css` 为什么会让表单控件“消失”

Milligram 默认启用 normalize + 自定义 reset，会重置 input、select、textarea 的 border、background 和 padding，导致在 Chrome/Firefox 下看起来像“没渲染出来”。这不是 bug，是极简设计的主动取舍。

实操建议：

检查是否漏加 class="input" — Milligram 不自动样式化原生表单元素，必须显式添加类名才能获得基础边框和尺寸
若用 input[type="checkbox"] 或 input[type="radio"]，需额外加 class="checkbox" 或 class="radio"，否则完全不可见
避免直接覆盖 input { border: 1px solid #ccc; }，优先用 Milligram 提供的 .input + .input-sm / .input-lg 组合来调节尺寸

Grid 布局里 `column` 类名不生效的三个常见原因

Milligram 的栅格系统依赖 .row 包裹 .column，且不支持嵌套 .row。一旦结构错位，CSS 选择器就失效。

常见错误现象：

直接写在下，没父级 .row —— 宽度保持 100%，无响应行为
在 .column 内又写了 —— Milligram 的 .row 有负 margin，嵌套会导致左右溢出
混用其他框架（如 Bootstrap）的 col-* 类，同时加载两套栅格 CSS，造成样式冲突


正确写法示例：
<div class="row">
  <div class="column column-60"></div>
  <div class="column column-40"></div>
</div>
自定义主题时为什么 primary 颜色改了但按钮没变
Milligram 的颜色变量（如 $primary）只影响部分组件：导航栏、链接、.button.-primary 的背景，但不控制 .button 默认态、.alert 或 .badge。它不是全量主题系统。

											
												
												
													创意前端视觉设计
													在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。
												
												下载
												
											
										
使用场景限制明显：


.button 默认是灰色（$grey），想让它随 $primary 变，得手动重写 .button:not(.-primary) { background: $primary; }

所有带 .-outline、.-success 等后缀的按钮，颜色值都是硬编码在源码里，不响应变量变更
编译时若用 Sass，必须确保 @import 顺序：先 variables.scss，再 base.scss，最后 components.scss，否则变量不会透传

Milligram 在现代项目中要不要搭配 PostCSS 或 Tailwind
可以搭，但要警惕“功能重叠陷阱”。Milligram 已内置 normalize、grid、typography、form、button 等模块，再引入 Tailwind 就等于维护两套原子类体系。
性能与兼容性影响：

Milligram 本身仅 4KB（gzip），加 PostCSS 主要为 autoprefixer 支持 IE11，但若项目已放弃 IE，这步可跳过
若只是想补足响应式断点（如 sm:hidden），不如直接扩写 Milligram 的 @media 规则，避免多一层抽象
真需要 utility-first，建议换用纯工具类方案（如 Picnic CSS 或自建 mini-utility.css），而非叠加 Milligram + Tailwind

真正容易被忽略的是：Milligram 的 small 标签、blockquote 引用样式、pre 代码块排版都带语义化默认值，删掉它们再靠 utility 类重建，反而更费劲。