0

I have 5 different stylesheets, for 5 different websites, that have some matching css. Is there a way to compare those five files, and take the css that is matching, and output it into a new file?

As an example:

cssFile1.css

.random-css {
  display: none;
}

.class1 {
  background-color: #eee;
  padding: 1rem;
  border-radius: 8px;
}

.class2 {
  font-size: 1.25px;
  line-height: 1.7;
  color: #0077b5;
}

.random-css-2 {
  margin: 0;
  padding: 0;
}

cssFile2.css

.random-css {
  display: flex;
  flex-wrap: wrap;
}

.class1 {
  background-color: #eee;
  padding: 1rem;
  border-radius: 8px;
}

.class2 {
  font-size: 1.25px;
  line-height: 1.7;
  color: #0077b5;
}

.random-css-2 {
  margin: 2rem;
  padding: 1rem;
}

cssFile3.css

.random-css {
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

.class1 {
  background-color: #eee;
  padding: 1rem;
  border-radius: 8px;
}

.class2 {
  font-size: 1.25px;
  line-height: 1.7;
  color: #0077b5;
}

.random-css-2 {
  margin: 1rem;
  padding: 2rem;
}

newCssFile.css

.class1 {
  background-color: #eee;
  padding: 1rem;
  border-radius: 8px;
}

.class2 {
  font-size: 1.25px;
  line-height: 1.7;
  color: #0077b5;
}

The different websites are in one project framework, so the structure we would like to have is one common.css and then 5 different css files for the individual styling. But right now we have 5 different css files with a lot of matching css and some individual.

Kasper Aamodt
  • 1
  • You could use javascript to do this. Access each file with an AJAX call and then compile the CSS into a string, rinse and repeat with each page. Then use `document.styleSheets` or some other form of creating an object out of the string so you can compare the 5 different objects. Here is a great answer that may help you get started... https://stackoverflow.com/a/9180271/1533592 – dale landry Jul 02 '21 at 08:43

0 Answers0