CODEWITHSUNDEEP
htmlcss
user14683773
user14683773

Reputation:

CSS: Duplicate Styles or Keep the Same

I have following CSS below for Top and Lower button row boxes. Sometimes, I duplicate CSS , because style and design may change in future. And Two row orientations may differ.

Generally, should I a) create duplicate css styles, so future developers can customize, or b) is it best practice to tightly couple into one, until UX may change design later?

.top-button-row {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.lower-button-row {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

enter image description here

Example: two rows may not be justify-content: space-between in future.

Upvotes: 0

Views: 351

Answers (1)

Gershom Maes
Gershom Maes

Reputation: 8178

My advice is to have a common class between the two elements, so that they can be styled together and individually:

<div class="button-rows">
  <div class="button-row top-button-row">...</div>
  <div class="button-row lower-button-row">...</div>
</div>

.button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button-row.top-button-row {
  color: red;
}
.button-row.lower-button-row {
  color: green;
}

Upvotes: 1

Related Questions