如何在BEM方法论中对Typography组件的必填变体进行分类？

推荐你采用修饰符方案，也就是把header1/header2/header3作为typography块的修饰符，理由和具体实现如下：

为什么不选独立块方案 #

把每个变体做成独立块（.header1等）会割裂它们的语义关联性——本质上这些都是Typography组件的不同样式变体，属于同一类UI元素。独立块不仅会导致通用样式重复编写，还会让组件体系的语义混乱，其他开发者看到.header1时很难直接联想到它是Typography组件的一部分，不符合BEM“块代表独立实体”的核心思想。

修饰符方案的合理性与解决思路 #

虽然BEM理论上要求块可以独立存在，但实际业务场景中完全允许块必须搭配修饰符使用——只要修饰符是块的合法变体。你可以给.typography块定义所有变体通用的基础样式（比如外边距、行高、字体继承规则），再通过修饰符覆盖差异化属性（字号、字重）：

CSS实现（Sass嵌套写法） #

.typography {
  // 通用基础样式，所有变体共享
  margin: 0 0 1rem;
  line-height: 1.4;
  font-family: inherit;

  &--header1 {
    font-size: 2.5rem;
    font-weight: 700;
  }

  &--header2 {
    font-size: 2rem;
    font-weight: 600;
  }

  &--header3 {
    font-size: 1.5rem;
    font-weight: 600;
  }
}

如果你的Typography确实没有任何通用样式，也可以让.typography块为空，仅作为修饰符的语义载体——这在BEM中也是合规的，因为块的核心是语义上的组件归属，而非必须有默认样式。

React组件实现（确保变体必填） #

通过PropTypes或TypeScript强制要求传入变体，避免出现无修饰符的typography块：

import PropTypes from 'prop-types';

const Typography = ({ variant, children }) => {
  return <p className={`typography typography--${variant}`}>{children}</p>;
};

Typography.propTypes = {
  variant: PropTypes.oneOf(['header1', 'header2', 'header3']).isRequired,
  children: PropTypes.node.isRequired,
};

export default Typography;

这种方案既符合BEM的语义规范，又能满足你“变体必填”的业务需求，同时让组件的样式体系更具可维护性。

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