Brad Frost原子设计中尺寸间距的实现及响应式层级疑问

一、尺寸与间距的放置逻辑 #

核心原则：原子管自身内部样式，分子/有机体管组件间组合间距，全局变量统一基准

• 原子层：

  • 定义全局统一的尺寸/间距变量，比如 $spacing-xs: 4px、$button-height: 40px，这是整个系统的基础单位。
  • 只设置原子自身的内部样式：比如按钮的padding、输入框的width: 100%（基础自适应）、图标固定尺寸，不要设置外部margin（margin是组件间的关系，不属于原子自身属性）。
  • 示例：

    .btn {
      height: var(--button-height);
      padding: var(--spacing-sm) var(--spacing-md); /* 内部间距，属于原子自身 */
      border: none;
    }
    

• 分子层：

  • 处理原子之间的组合间距：比如表单组里<label>和<input>的margin-bottom、按钮组里按钮的gap。
  • 完全基于原子层的变量来设置，确保间距统一。
  • 示例：

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm); /* 标签与输入框的间距 */
    }
    

• 有机体层：

  • 处理分子/原子之间的布局间距：比如头部导航中logo和菜单的margin-left、卡片列表中卡片的gap。
  • 定义有机体的整体尺寸约束：比如头部的max-width: 1200px、侧边栏的width: 280px。

• 模板/页面层：

  • 控制大区块之间的间距：比如主内容区与侧边栏的margin-right、页面顶部的padding-top。
  • 用全局间距变量统一控制页面级布局的留白。

二、响应式方案的层级确定 #

核心原则：断点变量全局定义，原子做基础适配，分子/有机体做布局调整，模板做页面级重构

• 全局变量层（原子层延伸）：

  • 先定义统一的响应式断点，比如 $breakpoint-sm: 576px、$breakpoint-md: 768px，同时定义不同断点下的尺寸/间距变量（比如 --spacing-md@sm: 12px）。
  • 这是所有响应式调整的基础，确保全系统断点统一。

• 原子层：

  • 针对原子自身做响应式适配：比如按钮在小屏上缩小padding，输入框在小屏上强制width: 100%。
  • 示例：

    .btn {
      padding: var(--spacing-sm) var(--spacing-md);
      @media (max-width: var(--breakpoint-sm)) {
        padding: var(--spacing-xs) var(--spacing-sm); /* 小屏缩小内部间距 */
      }
    }
    

• 分子/有机体层：

  • 处理组合组件的响应式布局变化：比如表单组在小屏上从水平排列改为垂直排列（调整flex-direction和gap），导航菜单在小屏上收起为汉堡菜单（调整width和margin）。
  • 示例：

    .nav-menu {
      display: flex;
      gap: var(--spacing-lg);
      @media (max-width: var(--breakpoint-md)) {
        position: fixed;
        width: 100%;
        top: 60px;
        left: 0;
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
      }
    }
    

• 模板层：

  • 控制页面级的响应式重构：比如侧边栏在小屏上隐藏，主内容区宽度改为100%，或者调整页面区块的排列顺序。
  • 这里只处理大布局的尺寸和间距变化，不涉及单个组件的细节。

关键实操建议 #

• 所有尺寸/间距必须基于全局变量，禁止硬编码数值，确保可扩展性。
• 外部margin尽量由父容器或上层组件控制，不要给原子组件加固定margin，避免组件复用时的样式冲突。
• 采用移动优先的响应式策略：先定义小屏的基础样式，再在大屏断点处做扩展调整，减少代码冗余。

内容的提问来源于stack exchange，提问作者spjgoku