Looking for a systematic method of efficiently abstracting inline styles

I am a junior-mid level developer.

I recently started a new job and I am tasked to essentially scrape an entire CRM project that has a huge majority of its styling done inline.

Objective: Clean out the inline styling to a shared folder that contains the .css file.

Problem: 50-100 of files that contain components with inline styles.

Goal: Adopt a systematic method to efficiently abstract the inline styles. While bringing some structure to this project.

Thoughts on any good methods of doing this?

I would approach something like this using an HTML parser, like simplehtmldom.

Your algorithm might resemble something like this:

  1. Parse existing HTML to extract inline CSS
  2. Write extracted styles to external CSS file
  3. Make a second pass at your existing HTML to remove the unwanted style attributes
  4. Add <link> element in the HTML pointing to your new external stylesheet