如何精简容器/文本框CSS代码？实现样式复用仅调整定位

你可以通过分离通用样式与个性化样式来实现复用，核心是把固定样式抽成基础类，差异部分用独立类，HTML中组合使用即可。

1. 抽离通用基础样式 #

把所有文本框、容器的共有样式提取出来，这些样式是所有实例都需要的：

/* 文本框通用样式 */
.textbox {
  border: 3.5px solid black;
  padding: 15px 25px;
  position: absolute;
  margin: 0;
}

/* 文本框内p标签通用样式 */
.textbox p {
  position: relative; /* 所有文本框的p都用到相对定位，统一抽离 */
}

/* 容器通用样式 */
.container {
  position: relative;
}

2. 定义个性化差异样式 #

将每个元素的独特样式（背景色、尺寸、定位、文本样式等）单独定义为类：

/* 文本框主题色 */
.textbox--light {
  background: rgb(172, 221, 232);
}
.textbox--dark {
  background: rgb(45, 110, 125);
}

/* 文本框尺寸 */
.textbox--large {
  width: 900px;
  height: 215px;
}
.textbox--small {
  width: 900px;
  height: 45px;
}
.textbox--tall {
  width: 900px;
  height: 290px;
}

/* 文本框定位 */
.pos-textbox1 {
  right: 467px;
  top: 385px;
}
.pos-textbox2 {
  right: 1625px;
  top: 71px;
}
.pos-textbox3 {
  right: 1625px;
  top: 0;
  z-index: 1; /* z-index必须是整数，0.9无效 */
}
.pos-textbox4 {
  right: 467px;
  top: 630px;
}

/* 容器定位 */
.container--2 {
  top: 230px;
  left: 1166px;
}
.container--3 {
  top: 550px;
  left: 1166px;
}

/* 文本样式 */
.text--black-justify {
  color: black;
  text-align: justify;
  font-weight: bold;
}
.text--white-large-center {
  color: white;
  font-size: 50px;
  bottom: 62px;
  left: 370px;
}
.text--white-large-left {
  color: white;
  font-size: 50px;
  bottom: 64px;
  left: 150px;
}
.text--black-center {
  color: black;
  text-align: center;
  font-weight: bold;
  width: 302px;
  left: 90px;
}

3. HTML中组合类使用 #

给每个元素同时添加基础类和对应的个性化类，实现样式复用：

<section class="textbox textbox--light textbox--large pos-textbox1">
  <p class="text--black-justify">#</p>
  <p><em>#</em></p>
</section>

<section class="container container--2">
  <section class="textbox textbox--dark textbox--small pos-textbox2">
    <p class="text--white-large-center">#</p>
  </section>
</section>

<section class="container container--3">
  <section class="textbox textbox--dark textbox--small pos-textbox3">
    <p class="text--white-large-left">#</p>
  </section>
</section>

<section class="textbox textbox--light textbox--tall pos-textbox4">
  <p class="text--black-center">'#'</p>
</section>

额外提示 #

• 尽量避免用position: absolute硬编码定位，推荐Flexbox或Grid布局，更灵活易维护；
• 把这些样式存为独立CSS文件（比如common.css），在需要的页面通过<link rel="stylesheet" href="common.css">引入，直接复用所有类；
• z-index只接受整数值，小数会被自动转换为整数，之前的0.9实际是0，达不到预期层级效果。

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