如何使用Milligram CSS框架实现极简主义风格的前端快速原型开发？
- 内容介绍
- 文章标签
- 相关推荐
本文共计934个文字，预计阅读时间需要4分钟。
Milligram 默认启用 normalize，自定义 reset，会重置 、、 的 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 选择器就失效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
<div class="column">直接写在<body>下，没父级.row—— 宽度保持 100%，无响应行为 - 在
.column内又写了<div class="row">—— 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。它不是全量主题系统。
使用场景限制明显：
-
.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 类重建，反而更费劲。
本文共计934个文字，预计阅读时间需要4分钟。
Milligram 默认启用 normalize，自定义 reset，会重置 、、 的 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 选择器就失效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
<div class="column">直接写在<body>下，没父级.row—— 宽度保持 100%，无响应行为 - 在
.column内又写了<div class="row">—— 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。它不是全量主题系统。
使用场景限制明显：
-
.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 类重建，反而更费劲。