javascript - How to combine 2 css file avoiding clash between the 2?

Question

I am working on 2 separate html file for the same project, eventually those files will go into the home page. My problem is the css files, as they have many in common element, which however they look different and will clash.

My question is, what is the best way to merge this css file so not to have any issue?

################## THIS IS CSS FILE 1 ################## 

@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif
}

html {
  height: 100%
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  visibility: visible
}

a {
  text-decoration: none;
  font-size: 12px;
}

li {
  padding: 10px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
}

li:hover {
  background-color: #87cefa;
  color: #003580;
}

h4 {
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px
}


/* ---------------------------------------
-------------- COMPONENTS ----------------
----------------------------------------*/

label {
  padding: 6px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  width: 120px;
  color: #000
}

ul {
  list-style-type: none;
  padding-left: 21px;
}

ul.horizontal,
ul.horizontal a {
  display: flex;
  list-style-type: none;
  color: white;
}

button {
  background-color: #ffffff;
  border: 1px solid #003580;
  color: #003580;
  align-items: center;
  border-radius: 6px;
  padding: 0 25px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: 0;
  width: 180px;
  height: 45px
}

button:hover {
  background-color: #87cefa;
  color: #003580;
}

i {
  margin: 0 12px 0 12px;
}

img {
  max-width: 150px;
  max-height: 150px
}

input {
  width: 150px;
  align-self: center;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: 0;
  background-color: transparent;
  border: transparent;
  text-align: center
}

::placeholder {
  color: #FFFFFF;
  opacity: 1;
}

select,
select.white {
  font-size: 15px;
  background-color: transparent;
  border: transparent;
  font-weight: 700;
  padding: 6px;
  cursor: pointer;
}

select.white {
  color: #FFFFFF;
}

select.white:focus {
  color: #003580;
}


/* ---------------------------------------
---------------  LAYOUT  -----------------
----------------------------------------*/

header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 9px;
  background-color: #003580;
  height: 45px;
}

.content_container {
  display: flex;
  flex-wrap: nowrap
}

.side_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580
}

.right_content {
  display: block;
  flex: 4
}

.all_sections_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.all_sections_container section {
  margin-bottom: 18%;
  display: none;
  width: 90%;
  height: 90%;
}

.profile_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.properties_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap
}

.properties_wrapper div {
  font-size: 12px;
  font-weight: 333;
  text-align: center
}

.utilities_wrapper,
.favorites_wrapper,
.settings_wrapper,
.offers_wrapper,
.messages_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}

.settings_wrapper button,
.utilities_wrapper button {
  margin-top: 21px;
}

################## THIS IS CSS FILE 2 ################## 

@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif
}

html {
  height: 100%
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  visibility: visible
}

h4 {
  margin: 9px;
  padding-left: 9px;
  padding-top: 6px;
  border-top: 1px solid #eef0f1
}

h5 {
  color: #fff;
  font-size: 12px
}

h5.h5_dropdown {
  margin: 5px 0 -5px 0
}

label {
  padding-left: 12px;
  cursor: pointer
}

button {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background-color: #fff;
  border: 0;
  border-radius: 8px;
  height: 45px;
  text-align-last: center;
  margin-right: 10px;
  resize: none;
  outline: 0;
  cursor: pointer;
  min-width: 100px
}

button.red {
  cursor: pointer;
  background-color: #e00000;
  color: #fff;
  border: thin solid #e00000
}

button.red:hover {
  background-color: #f23d3d
}

input[type=checkbox] {
  cursor: pointer
}

input[type=number],
input[type=text] {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background-color: #fff;
  border: 0;
  border-radius: 8px;
  height: 45px;
  text-align-last: center;
  margin-right: 10px;
  resize: none;
  outline: 0;
  min-width: 300px;
  text-align: center;
  cursor: auto
}

select {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background-color: #fff;
  border: 0;
  border-radius: 9px;
  height: 45px;
  text-align-last: center;
  resize: none;
  outline: 0;
  cursor: pointer;
  padding: 3px;
  margin: 6px
}

.select_city {
  margin-right: -15px
}

.search_box_category_selector_flex_container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 51%;
  margin-left: 21%
}

.search_box_category_selector_flex_container div {
  border: 1px solid gray;
  flex: 1;
  font-size: 12px;
  font-weight: 333;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  margin-bottom: -6px;
  margin-right: 3px
}

.search_box_flex_main_container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  height: 99px;
  background-color: #2b2d2e;
  align-items: center
}

.city_select_dropdown_container {
  z-index: 2
}

.buildings_select_container {
  z-index: 1
}

.bedroom_range_form_container,
.more_form_container,
.price_range_form_container {
  position: absolute
}

.price_range_frame {
  display: flex;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  border: thin solid #000;
  border-radius: 6px;
  padding: 6px 0 6px 7px
}

.bedroom_range_frame {
  border: thin solid #000;
  background-color: #fff;
  padding: 6px 0 6px 8px;
  border-radius: 6px
}

.more_form {
  color: #000;
  background-color: #fff;
  display: flex;
  flex-direction: column
}

.more_form_container {
  margin: 4px 4px;
  padding: 4px;
  height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: justify;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000
}

.more_form_container div {
  padding-left: 12px
}

.more_form_bottom_buttons_container {
  display: flex;
  justify-content: center;
  padding: 15px
}

question from:https://stackoverflow.com/questions/65858745/how-to-combine-2-css-file-avoiding-clash-between-the-2

Answer 1

I would recommend trying this tool

CSS Compressor & Minifier

It has lots of options, you can compress and/or minify CSS.

• Copy both CSS files into a CSS input
• Turn on Sort selectors and properties
• Obtain output
• Manually remove duplicates
• Re-enter input
• Compress or minify your output