为现代Web而生的原生CSS框架
告别臃肿的依赖。Breeze.css 是一个基于原生CSS3最新特性构建的轻量级框架，专注于逻辑属性、容器查询、CSS层叠与设计令牌。
核心特性
🎨
设计令牌驱动
通过一套完整的CSS自定义属性（变量）定义色彩、间距、字体等，主题切换轻而易举。
🧭
逻辑属性优先
全面采用 margin-inline、padding-block 等逻辑属性，天生支持RTL布局。
📦
容器查询就绪
集成容器查询组件，实现真正的组件级响应式设计，超越传统的媒体查询。
🏗️
现代CSS层叠
利用 @layer 清晰管理样式优先级，结合 @supports 实现优雅的渐进增强。
代码示例
传统 vs Breeze (逻辑属性)
/* 传统物理属性 */
.button {
margin-left: 1rem;
padding-top: 0.5rem;
border-right: 2px solid blue;
}
/* Breeze 逻辑属性 */
.button {
margin-inline-start: var(--space-4);
padding-block-start: var(--space-2);
border-inline-end: var(--border-width-2) solid var(--color-primary);
}容器查询组件
自适应卡片
调整此容器宽度，观察布局变化。
当容器宽度 ≥ 30rem 时，此卡片自动变为两列布局。
只需一步，立即开始
通过 CDN 引入
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/breeze.css/dist/breeze.modern.min.css">或者，复制我们刚刚构建的完整框架代码到您的 <style> 标签中，实现零依赖。