CSS中何时适合使用style内联属性？单次样式调整规范咨询

方案合理性结论 #

你描述的单次使用、仅调整单个属性的场景下，直接使用内联style是完全符合规范的合理选择，不必对使用内联样式有过度顾虑。
业内普遍不推荐内联样式的核心前提是：当样式可复用、需要统一维护、或需要支持响应式适配/伪类样式覆盖等需求时，内联样式会大幅提升维护成本，这类场景才需要避免使用内联样式。

两种方案的适用边界 #

你可以根据后续的需求预期选择对应的实现方式：

• 选择内联style的适用场景：
  1. 这次的高度调整仅作用于当前这一个元素，后续不会有其他元素需要相同的高度调整
  2. 该高度属于一次性特殊调整，不需要做响应式适配（不同屏幕尺寸下不需要修改该高度值）
  3. 不需要针对该高度做伪类交互（比如hover时修改高度），也没有更高优先级的样式覆盖需求
     你当前的需求完全符合上述场景，直接写<div class="groupbox" style="height: 300px;"></div>没有问题，额外新增独立类反而会产生不必要的CSS冗余。
     *注意：你当前CSS定义的类名是.group-box（带中划线），HTML里写的是groupbox（无中划线），拼写不一致会导致样式不生效，使用时记得统一类名。
• 选择新增修饰类的适用场景：
  如果后续大概率会有多个元素需要用到300px高度的groupbox，或者需要对这个高度做响应式调整，可以按照BEM命名规范新增一个修饰类：

  .group-box--large {
      height: 300px;
  }
  

  HTML写法为：

  <div class="group-box group-box--large"></div>
  

  这种方式复用性更强，后续需要调整所有大尺寸groupbox的高度时，仅需要修改一处CSS即可。

主流CSS编码规范的相关约定 #

包括Google、Airbnb在内的主流CSS编码规范都没有完全禁止内联样式，仅明确要求内联样式仅用于一次性的动态/特殊样式调整，不能用于编写可复用的通用样式，你的需求属于前者，使用内联样式完全符合规范要求。

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