样式表介绍
介绍
我提供了一个CSS样式库, 旨在简化页面设计流程，促进CSS代码的高效重用。受到Tailwind的启发，采用了先进的CSS原子化原则，这种方法不仅提高了代码的模块化程度，还增强了其灵活性和可维护性。 原子化CSS让每个样式类都拥有单一的、明确的职责，避免了样式间的不必要冲突，减少了全局作用域的影响。
词条约定
为了实现高度的统一性和一致性，我制定了一套明确的规则，在设计css类时使用统一的术语，无论是全称还是缩写，都遵循一致的标准。旨在提高效率，增强代码的可读性和可维护性。 对于具有明显变化区间的样式，采用了统一的步进策略。确保在不同层级或类别之间，样式的变化是有序和可预测的。我希望能够通过这种方式，实现从微观到宏观的一致性，同时保持设计的灵活性和多样性。
方向性
用于表示方向, 如左边, 右边等, pad-l表示padding-left, pad-v表示同时设置padding-top和padding-bottom.
| 名称 | 描述 |
|---|---|
| v | vertical, 垂直方向 |
| h | horizontal, 水平方向 |
| l | left, 左方向 |
| r | right, 右方向 |
| t | top, 上方向 |
| b | bottom, 下方向 |
尺寸
用于表示大小, 数量或尺寸等
表示尺码
| 名称 | 描述 |
|---|---|
| xs | 最小尺码 |
| ms | 小尺码 |
| md | 中等尺码 |
| lg | 大号尺码 |
| xl | 加大号尺码 |
| 2xl | 加加大尺码 |
| *xl | 更大尺码 |
表示百分百
| 名称 | 描述 |
|---|---|
| full | 表示100% |
| half | 表示50%(1/2) |
| third | 表示33.3333%(1/3) |
| fourth | 表示25%(1/4) |
| fifth | 表示20%(1/5) |
其他
| 名称 | 描述 |
|---|---|
| screen | 表示屏幕, 如h-screen表示height: 100vh, w-screen表示width: 100vw |
步进与区间
为确保设计的统一性原则，我制定了一套区间数字规则。这些规则专为那些需要通过数字来区分细微差别的样式设计。我们采用了一致的步进规则，确保在不同设计元素之间，数字的使用既有序又具有逻辑性。
| none | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 20 | 24 | 32 | 40 |
|---|
none表示无或者0, 比如pad-none表示padding: 0