Great question! When multiple classes share the same property (like your border-color: #F5E0C4), there are a few clean, maintainable ways to avoid repeating code. Here are the most practical approaches:

1. Group Selectors Together #

The simplest solution is to create a single rule targeting all your classes for the shared property, then keep their unique styles in separate rules. This cuts down repetition while keeping related styles organized.

/* Shared style for all three classes */
.class1, .class2, .class3 {
  border-color: #F5E0C4;
}

/* Individual unique styles */
.class1 {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
  height: 21px;
}

.class2 {
  font-weight: bold;
  padding: 0px 3px 3px 4px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e2ccab;
}

.class3 {
  font-weight: bold;
  font-size: 14px;
  background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

This works perfectly for one-off shared properties and keeps your CSS easy to scan.

2. Create a Reusable Utility Class #

If you might want to apply this border color to other elements later, make a dedicated utility class for it. Then add this class alongside your existing classes in the HTML.

/* Utility class for the shared border color */
.border-f5e0c4 {
  border-color: #F5E0C4;
}

/* Original classes without repeated border-color */
.class1 {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
  height: 21px;
}

.class2 {
  font-weight: bold;
  padding: 0px 3px 3px 4px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e2ccab;
}

.class3 {
  font-weight: bold;
  font-size: 14px;
  background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

In your HTML:

<div class="class1 border-f5e0c4">...</div>
<div class="class2 border-f5e0c4">...</div>
<div class="class3 border-f5e0c4">...</div>

This is ideal for reusing styles across unrelated components.

3. Use CSS Custom Properties (Variables) #

For maximum maintainability—especially if you might change this color later—define a CSS variable for the border color. Reference it in each class, so you only need to update the variable once to change the color everywhere it’s used.

/* Define the variable globally (using :root makes it accessible everywhere) */
:root {
  --border-color: #F5E0C4;
}

/* Classes using the variable */
.class1 {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
  height: 21px;
  border-color: var(--border-color);
}

.class2 {
  font-weight: bold;
  padding: 0px 3px 3px 4px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e2ccab;
  border-color: var(--border-color);
}

.class3 {
  font-weight: bold;
  font-size: 14px;
  background-image: linear-gradient(180deg,#314d8a,#93aee8);
  border-color: var(--border-color);
}

This is the most scalable approach, perfect for larger projects with consistent theming needs.

Each method has its use case: group selectors for simple shared properties, utility classes for cross-component reuse, and variables for easy theming updates.

内容的提问来源于stack exchange，提问作者Neeraj Kumar Gupta