原子化设计
像乐高积木一样，每个CSS类都是一个独立的"积木"，可以自由组合构建任何你想要的设计。
lego.css
像乐高积木一样写CSS
基于原子类和 Pure CSS 思想设计的现代CSS框架，帮助你更快、更轻松地编写页面样式，完美解决CSS难复用、难扩展、难维护的问题。
为什么选择 lego.css？
极简语法
简洁的缩写语法，m10 代表 margin: 10px，bgc#f00 代表 background-color: #f00。
伪类支持
内置伪类支持，h:(bgc#f00) 表示 hover 状态，让交互效果编写更简单。
轻量级
核心文件体积小，按需加载，结合 PurgeCSS 可以最大程度减少最终bundle大小。
高度可定制
支持自定义配置，可以轻松扩展和修改以适应不同项目的需求。
开发效率
显著提升开发效率，减少CSS文件大小，让你专注于业务逻辑而不是样式编写。
简单易学的语法
传统CSS写法
style.css
/* 传统CSS需要写很多代码 */
.my-button {
margin: 10px 20px;
padding: 15px 30px;
background-color: #ff6b6b;
color: white;
border-radius: 8px;
font-size: 16px;
border: 1px solid #ff6b6b;
cursor: pointer;
transition: all 0.3s ease;
}
.my-button:hover {
background-color: #ff5252;
border-color: #ff5252;
transform: translateY(-2px);
}
/* 需要更多代码来处理复杂样式 */
.interactive-container {
width: 200px;
height: 200px;
background-color: #fe6915;
float: right;
transition: all 0.3s ease;
}
.interactive-container:hover {
width: 180px !important;
height: 180px !important;
background-color: #fae32f;
padding: 1px;
}lego.css写法
index.html
<!-- 只需要一行HTML class -->
<button class="
m10-20 p15-30 bgc#ff6b6b c#fff
bd[1 solid #ff6b6b] fs16 c-pointer
h:(bgc#ff5252 bd[1 solid #ff5252] t[translateY(-2px)])
">
按钮文本
</button>
<!-- 复杂交互效果，一行搞定 -->
<div class="s200 bgc#fe6915 f-r h:(s180! bgc#fae32f p1)">
可交互容器
</div>
<!-- 复杂文本样式 -->
<p class="
h:(c#0f1 ts[1 2 5 #f00] bdb[2 dashed #000])
lh1.5! ls4 fs40 bd[1 solid #0FF]
">
悬停文本效果
</p>
<!-- Flexbox 布局示例 -->
<div class="d-flex jc-center ai-center h100vh bgc#f0f0f0">
<div class="p20 bgc#fff bd[1 solid #ddd] br10 ta-center">
完美居中的卡片
</div>
</div>